Homecomponentsinput

ChoiceList

An input showing a set of choices to choose from.

Use ChoiceList to create a list of grouped radio buttons or checkboxes.

Choice Types

Use the type property to set the type of list you want to create. Set it to "multiple" for a multi-choice list.

Single

Multiple

Open in Playroom

Borders

Set the bordered property to show borders.

Open in Playroom

Spacings

Use the spacing property to set the spacing between the list items.

Tight

Tight

Loose

Loose

Open in Playroom

Error Message

Use the errorMessage property to set the error message.

You must select at least one option
You must select at least one option
You must select at least one option
You must select at least one option
Open in Playroom

API

type
Required
Allow single or multiple choice selection.
multiple
single
onChange
Required
Called when a selection is made or removed.
((selected: string[]) => void) | ((selected: string) => void)
name
Required
Name of the input.
string
choices
Required
List of possible choices.
{ id: string; label: string; disabled?: boolean | undefined; }[]
value
Selected choice or choices.
string | string[]
errorMessage
Displays an error message.
string
bordered
Displays borders around the items.
true
false
spacing
Vertical spacing between the items.
loose
tight
data
An object with the data keys and values.
DataAttributeMap
Table of Contents
Choice Types
Borders
Spacings
Error Message
API