---
title: Use Textarea, Date, Boolean, Number, and Range controls
category: Sidebar controls in depth
order: 2
status: published
summary: Use the built-in input-like sidebar controls for plain values such as text areas, dates, booleans, numeric values, and sliders.
estimatedTime: 6 min
keywords: sideeditprops textarea date boolean number range textareaoptions rangeoptions
---

In this how-to, you'll learn when to use the simpler sidebar controls:

- `Textarea`
- `Date`
- `Boolean`
- `Number`
- `Range`

These are great when the prop is just a plain value and editors do not need a complex picker.

Docs reference:
[Sidebar controls](https://docs.reactbricks.com/bricks/schema/side-edit-props/#control-types)

## A quick mental model

These controls map well to familiar input types:

- `Textarea`: multi-line text
- `Date`: a date picker
- `Boolean`: a checkbox or toggle-like yes/no value
- `Number`: a numeric input
- `Range`: a slider

If your brick needs a simple setting such as "show image", "publish date", "columns", or "excerpt", these controls are usually the first place to look.

## Example brick

Here is a simple article card brick using all 5:

```tsx {51-54,59,64,69-74,79-84}
import { Text, types } from 'react-bricks/rsc'

interface ArticleCardProps {
  title: types.TextValue
  excerpt: string
  publishDate: string
  featured: boolean
  columns: number
  imageRadius: number
}

const ArticleCard: types.Brick<ArticleCardProps> = ({
  title,
  excerpt,
  publishDate,
  featured,
  columns,
  imageRadius,
}) => {
  return (
    <article className={featured ? 'ring-2 ring-sky-500' : ''}>
      <Text
        propName="title"
        value={title}
        placeholder="Article title..."
        renderBlock={({ children }) => <h3>{children}</h3>}
      />
      <p>{excerpt}</p>
      <p>Publish date: {publishDate}</p>
      <p>Columns: {columns}</p>
      <p>Image radius: {imageRadius}px</p>
    </article>
  )
}

ArticleCard.schema = {
  name: 'article-card',
  label: 'Article Card',
  getDefaultProps: () => ({
    title: 'React Bricks guide',
    excerpt: 'A short summary for cards, grids, or lists.',
    publishDate: '2026-04-07',
    featured: false,
    columns: 2,
    imageRadius: 12,
  }),
  sideEditProps: [
    {
      name: 'excerpt',
      label: 'Excerpt',
      type: types.SideEditPropType.Textarea,
      textareaOptions: {
        height: 120,
      },
    },
    {
      name: 'publishDate',
      label: 'Publish Date',
      type: types.SideEditPropType.Date,
    },
    {
      name: 'featured',
      label: 'Featured',
      type: types.SideEditPropType.Boolean,
    },
    {
      name: 'columns',
      label: 'Columns',
      type: types.SideEditPropType.Number,
      rangeOptions: {
        min: 1,
        max: 4,
        step: 1,
      },
    },
    {
      name: 'imageRadius',
      label: 'Image Radius',
      type: types.SideEditPropType.Range,
      rangeOptions: {
        min: 0,
        max: 48,
        step: 4,
      },
    },
  ],
}
```

## `Textarea`

Use `Textarea` when the value is still plain text, but editors need more room than a one-line text field.

Typical use cases:

- an excerpt
- a disclaimer
- a caption
- a short block of plain copy that is not visually editable

`textareaOptions.height` lets you control the editing area height.

## `Date`

Use `Date` when editors must choose a date, such as:

- event dates
- publication dates
- campaign start dates

The value is still just a prop on your brick, so you decide how to render and format it in JSX.

## `Boolean`

Use `Boolean` for simple on/off decisions:

- show or hide an image
- enable a shadow
- mark a card as featured

This is often the cleanest way to give editors controlled flexibility without opening up too many design choices.

## `Number` vs `Range`

Both controls work well for numeric values and both can use `rangeOptions`.

Use `Number` when:

- editors may need to type an exact value
- the value is more data-like than visual

Use `Range` when:

- the value lives within a small visual range
- a slider is faster and safer for editors

Examples:

- `Number`: columns, max items, delay in milliseconds
- `Range`: padding, border radius, opacity, gap

## A practical tip

Even for simple controls, pair them with:

- `helperText` when the meaning is not obvious
- `validate` when only some values are allowed
- `show` when the control depends on another prop

For example:

```tsx
{
  name: 'columns',
  label: 'Columns',
  type: types.SideEditPropType.Number,
  rangeOptions: { min: 1, max: 4, step: 1 },
  validate: (value) => value >= 1 && value <= 4 || 'Use a value from 1 to 4',
}
```

## Related reading

- [Validate values](/how-tos/create-a-brick/validate-values)
- [Use the Select control](/how-tos/sidebar-controls-in-depth/use-the-select-control)