Radio

When to use

  • Used for selecting multiple selections from an array of options
  • If using many options, it would make more sense to use a Select, or a Dropdown to facilitate the many options.

Installing

Import the component

import { Radio } from '@supabase/ui'

Basic

Radios can be used alone. Pass the same name to them.

Loading

Grouped checkboxes

Wrap the radio options in a Group, and use the Group to control and receive onChange.

Use the <Radio.Group> sub component to wrap <Radio> components together.

You can then set the name and use onChange for all the radios via the <Radio.Group> component.

Loading

Controlled checkbox

⚠️ This doesn't work at the moment

Requires value to be used in Radio.Group so that component can be controlled by React state.

! Also there is no DefaultValue

Loading

Grouped radio with card styling

Using the prop type you can change the card styling to use cards.

Loading

API reference

Radio

coming soon

Radio.Group

coming soon