Radio Group

A custom radio group component with support for sizes and colors. Form compatible.

Usage

Preview
Code

Label

Option 1

Option 2

1
---
2
import { RadioGroup } from '@studiocms/ui/components';
3
---
4

5
<RadioGroup
6
  label='Label'
7
  options={[
8
    { label: 'Option 1', value: 'opt-1' },
9
    { label: 'Option 2', value: 'opt-2' }
10
  ]}
11
/>

Direction

You can change a radio group to be displayed horizontally by using the horizontal prop:

Preview
Code

Label

Option 1

Option 2

1
---
2
import { RadioGroup } from '@studiocms/ui/components';
3
---
4

5
<RadioGroup
6
  label='Label'
7
  horizontal
8
  options={[
9
    { label: 'Option 1', value: 'opt-1-h' },
10
    { label: 'Option 2', value: 'opt-2-h' }
11
  ]}
12
/>

Default Value

You can set a default selected option via the defaultValue prop.

Preview
Code

Default Selected

Option 1

1
---
2
import { RadioGroup } from '@studiocms/ui/components';
3
---
4

5
<RadioGroup
6
  label='Default Selected'
7
  defaultValue='opt-1'
8
  options={[
9
    { label: 'Option 1', value: 'opt-1' }
10
  ]}
11
/>
12
<!-- Other colors omitted for simplicity -->

Colors

The radio group component supports all default colorways.

Preview
Code

Default

Option 1

Primary

Option 1

Success

Option 1

Warning

Option 1

Danger

Option 1

1
---
2
import { RadioGroup } from '@studiocms/ui/components';
3
---
4

5
<RadioGroup
6
  label='Default Selected'
7
  defaultValue='opt-1'
8
  options={[
9
    { label: 'Option 1', value: 'opt-1' }
10
  ]}
11
  color='primary'
12
/>
13
<!-- Other colors omitted for simplicity -->

Disabling

You can disable either the entire radio group (by passing the disabled prop) or a single option via the options. The example below shows how to do the latter:

Preview
Code

One option disabled

Option 1

Option 2

1
---
2
import { RadioGroup } from '@studiocms/ui/components';
3
---
4

5
<RadioGroup
6
  label='Default'
7
  options={[
8
    { label: 'Option 1', value: 'opt-1', disabled: true },
9
    { label: 'Option 1', value: 'opt-2' }
10
  ]}
11
  color='primary'
12
/>
13
<!-- Other colors omitted for simplicity -->

Form Support

Inputs have full form support. You can use the isRequired and name attributes as needed.

The first one does what it says it does, while the latter sets the name attribute so you can access the input in, for example, the FormData returned by a submission. Here’s an example showing how to set both of them:

1
---
2
import { RadioGroup } from '@studiocms/ui/components';
3
---
4

5
<RadioGroup
6
  label='Required & Custom Name'
7
  isRequired
8
  name='required-radio'
9
  options={[
10
    { label: 'Option 1', value: 'opt-1' },
11
    { label: 'Option 2', value: 'opt-2' }
12
  ]}
13
/>