---
title: Add a sidebar control
category: Custom bricks
order: 9
status: published
summary: Add a sidebar control to let editors choose whether the image appears on the left or right.
estimatedTime: 4 min
keywords: sideeditprops sidebar control select radio
---

## What you'll build

In this how-to, you'll add a sidebar control to the `TextImage` brick so editors can choose whether the image is shown on the left or on the right.

You'll:

- add an `imageSide` prop to the component interface
- use `clsx` to conditionally change the image column order
- add `sideEditProps` to the schema
- set a default value for the new prop

At the end, editors will be able to switch the image position from the React Bricks sidebar.

## Start from the previous example

If you're starting from the brick used in the previous how-to, your `TextImage` should look like this:

```tsx
import { Image, Link, RichText, Text, types } from 'react-bricks/rsc'

interface TextImageProps {
  title: types.TextValue
  description: types.TextValue
  image: types.IImageSource
}

const TextImage: types.Brick<TextImageProps> = ({
  title,
  description,
  image,
}) => {
  return (
    <div className="container">
      <div className="grid lg:grid-cols-2 gap-12">
        <div>
          <Text
            propName="title"
            value={title}
            placeholder="Type a title..."
            renderBlock={({ children }) => (
              <h2 className="text-3xl font-extrabold">{children}</h2>
            )}
          />

          <RichText
            propName="description"
            value={description}
            placeholder="Type a description..."
            renderBlock={({ children }) => (
              <p className="text-lg text-slate-600">{children}</p>
            )}
            allowedFeatures={[
              types.RichTextFeatures.Bold,
              types.RichTextFeatures.Link,
            ]}
            renderBold={({ children }) => (
              <b className="text-pink-500">{children}</b>
            )}
            renderLink={({ children, href, target, rel }) => (
              <Link
                href={href}
                target={target}
                rel={rel}
                className="text-sky-500 hover:text-sky-600 transition-colors"
              >
                {children}
              </Link>
            )}
          />
        </div>

        <div>
          <Image
            propName="image"
            source={image}
            alt="Image"
            maxWidth={800}
            aspectRatio={16 / 9}
          />
        </div>
      </div>
    </div>
  )
}

TextImage.schema = {
  name: 'text-image',
  label: 'Text Image',

  getDefaultProps: () => ({
    title: 'Thick as a brick',
    description: 'Another brick in the wall',
  }),
}

export default TextImage
```

## Add the `imageSide` prop

First, add a new prop to the interface:

```tsx {4}
interface TextImageProps {
  title: types.TextValue
  description: types.TextValue
  image: types.IImageSource
  imageSide: 'left' | 'right'
}
```

Then read it from the component props:

```tsx {5}
const TextImage: types.Brick<TextImageProps> = ({
  title,
  description,
  image,
  imageSide,
}) => {
```

This prop will store the editor's choice for the image position.

## Use `clsx` for conditional classes

Before using `clsx`, install it in your project:

```bash
pnpm add clsx
```

To conditionally change the order of the image column, import `clsx`:

```tsx {1}
import clsx from 'clsx'
```

Now update the `<div>` that wraps the image:

```tsx {1}
<div className={clsx({ 'order-first': imageSide === 'left' })}>
  <Image
    propName="image"
    source={image}
    alt="Image"
    maxWidth={800}
    aspectRatio={16 / 9}
  />
</div>
```

If `imageSide === 'left'`, the `order-first` class is applied, so on large screens the image becomes the first column.

If `imageSide === 'right'`, no extra class is added, so the text stays first and the image stays on the right.

## Add `sideEditProps` to the schema

Now let's add a sidebar control to the schema:

```tsx {11-24}
TextImage.schema = {
  name: 'text-image',
  label: 'Text Image',

  getDefaultProps: () => ({
    title: 'Thick as a brick',
    description: 'Another brick in the wall',
    imageSide: 'right',
  }),

  sideEditProps: [
    {
      name: 'imageSide',
      label: 'Image Side',
      type: types.SideEditPropType.Select,
      selectOptions: {
        display: types.OptionsDisplay.Radio,
        options: [
          { value: 'left', label: 'Left' },
          { value: 'right', label: 'Right' },
        ],
      },
    },
  ],
}
```

`sideEditProps` defines controls shown in the React Bricks sidebar for the selected brick.

Each object in this array describes one editable setting:

- `name`: the prop name to update on the component
- `label`: the label shown in the sidebar UI
- `type`: the kind of control to render

In this case, `type: types.SideEditPropType.Select` means we want to render a select-style control.

Inside `selectOptions`:

- `display: types.OptionsDisplay.Radio` tells React Bricks to show the options as radio buttons
- `options` defines the available choices
- each option has a `value`, which is stored in the prop, and a `label`, which is shown to the editor

So when the editor picks `Left`, the prop becomes `imageSide: 'left'`.
When the editor picks `Right`, the prop becomes `imageSide: 'right'`.

## Set the default value

We also added:

```tsx
imageSide: 'right'
```

inside `getDefaultProps`.

This means new `TextImage` bricks will show the image on the right by default.

## Final code

Your full `TextImage.tsx` file should now look like this:

```tsx
import clsx from 'clsx'
import { Image, Link, RichText, Text, types } from 'react-bricks/rsc'

interface TextImageProps {
  title: types.TextValue
  description: types.TextValue
  image: types.IImageSource
  imageSide: 'left' | 'right'
}

const TextImage: types.Brick<TextImageProps> = ({
  title,
  description,
  image,
  imageSide,
}) => {
  return (
    <div className="container">
      <div className="grid lg:grid-cols-2 gap-12">
        <div>
          <Text
            propName="title"
            value={title}
            placeholder="Type a title..."
            renderBlock={({ children }) => (
              <h2 className="text-3xl font-extrabold">{children}</h2>
            )}
          />

          <RichText
            propName="description"
            value={description}
            placeholder="Type a description..."
            renderBlock={({ children }) => (
              <p className="text-lg text-slate-600">{children}</p>
            )}
            allowedFeatures={[
              types.RichTextFeatures.Bold,
              types.RichTextFeatures.Link,
            ]}
            renderBold={({ children }) => (
              <b className="text-pink-500">{children}</b>
            )}
            renderLink={({ children, href, target, rel }) => (
              <Link
                href={href}
                target={target}
                rel={rel}
                className="text-sky-500 hover:text-sky-600 transition-colors"
              >
                {children}
              </Link>
            )}
          />
        </div>

        <div className={clsx({ 'order-first': imageSide === 'left' })}>
          <Image
            propName="image"
            source={image}
            alt="Image"
            maxWidth={800}
            aspectRatio={16 / 9}
          />
        </div>
      </div>
    </div>
  )
}

TextImage.schema = {
  name: 'text-image',
  label: 'Text Image',

  getDefaultProps: () => ({
    title: 'Thick as a brick',
    description: 'Another brick in the wall',
    imageSide: 'right',
  }),

  sideEditProps: [
    {
      name: 'imageSide',
      label: 'Image Side',
      type: types.SideEditPropType.Select,
      selectOptions: {
        display: types.OptionsDisplay.Radio,
        options: [
          { value: 'left', label: 'Left' },
          { value: 'right', label: 'Right' },
        ],
      },
    },
  ],
}

export default TextImage
```

## Try it in the editor

Go back to the visual editor and select the `Text Image` brick.

Now, in the sidebar, you'll see an `Image Side` control with two radio options:

- `Left`
- `Right`

When you switch between them, the image column changes position.

## What's next

Your brick now has a sidebar control that changes the layout without editing the code.

From here, you can add more sidebar props for spacing, colors, alignment, or image aspect ratio.