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.

Borders

Set the bordered property to show borders.

Spacings

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

Error Message

Use the errorMessage property to set the error message.

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

ChoiceList

Choice Types

Single

Multiple

Borders

Spacings

Tight

Tight

Loose

Loose

Error Message

API