Checkbox

When to use

• Used for selecting a selection from an array of options
• Using just one checkbox is similar to using the Toggle component although the checkbox uses an Input tag that needs to be submitted

Installing

Import the component

import { Checkbox } from '@supabase/ui'

Basic

You can use a single checkbox alone, with just a label. You can then use the prop onChange for change events.

Controlled checkbox

⚠️ This doesn't work at the moment

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

! Also there is no DefaultValue

Grouped checkboxes

Checkboxes allow for multiple selections so they are sometimes used in part of a group. You can wrap Checkboxes in a subcomponent called <Checkbox.Group>.

You can use the onChange prop on either the group subcomponent or the Checkbox components individually.

API reference

Checkbox

coming soon

Checkbox.Group

coming soon