Latest workshop recording now available
Watch now
← Back to all how-tos

Sidebar controls in depth

Use Textarea, Date, Boolean, Number, and Range controls

Use the built-in input-like sidebar controls for plain values such as text areas, dates, booleans, numeric values, and sliders.

Estimated time: 6 minRaw Markdown

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

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:

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:

{
  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