Checklist

import Checklist, { ChecklistItem } from 'frui/fields/Checklist';

Copy

Props

Checklist accepts all props of a standard HTML input element. See Moz for standard input attributes.

Name	Type	Required	Notes
checked	boolean	No	Default checked state (Controlled)
className	string	No	Standard HTML class names
color	string	No	Changes the color of the checklist
defaultChecked	string	No	Default checked state (Uncontrolled)
defaultValue	string	No	Default value (Uncontrolled)
disabled	boolean	No	Disables the radio group
error	string\|boolean	No	Any error message
label	string	No	Shows text to the right of checkbox
name	string	Yes	Used for react server components
onChange	Function	No	Event handler when value has changed
onUpdate	Function	No	Update event handler
orientation	string	No	Set checklist layout (row or column)
passRef	LegacyRef	No	Passes ref to html input
style	CSS Object	No	Standard CSS object
value	string	No	Default value (Controlled)

Basics

Checklist wraps the HTML standard `<input />` element. Therefore, you can use any input attributes as props.

Option 1Option 2Option 3

<Checklist name="Options">
  <ChecklistItem label="Option 1" value="option1" />
  <ChecklistItem label="Option 2" value="option2" />
  <ChecklistItem label="Option 3" value="option3" />
</Checklist>

Copy

Default Value

You can set the default selected value, using: defaultValue={['default1', 'default2']}.

Default 1Default 2Default 3

<Checklist name="Defaults" defaultValue={["default1", "default2"]}>
  <ChecklistItem label="Default 1" value="default1" />
  <ChecklistItem label="Default 2" value="default2" />
  <ChecklistItem label="Default 3" value="default3" />
</Checklist>

Copy

You can set a checkbox as the default selected value: defaultChecked.

Checked 1Checked 2Checked 3

<Checklist name="Checked">
  <ChecklistItem label="Checked 1" value="checked1" defaultChecked />
  <ChecklistItem label="Checked 2" value="checked2" />
  <ChecklistItem label="Checked 3" value="checked3" />
</Checklist>

Copy

Orientation

Row

To change the checklist layout to horizontal (default), use: orientation='row'.

Row 1Row 2Row 3

<RadioGroup name="Rows" orientation="row">
  <RadioGroupItem label="Row 1" value="row1" />
  <RadioGroupItem label="Row 2" value="row2" />
  <RadioGroupItem label="Row 3" value="row3" />
</RadioGroup>

Copy

Column

To change the checklist layout to vertical, use: orientation='column'.

Column 1Column 2Column 3

<RadioGroup name="Columns" orientation="column">
  <RadioGroupItem label="Column 1" value="column1" />
  <RadioGroupItem label="Column 2" value="column2" />
  <RadioGroupItem label="Column 3" value="column3" />
</RadioGroup>

Copy

Events

onUpdate is like onChange except the value is passed instead of the change event.

Update 1Update 2Update 3

<Checklist name="Update" onUpdate={(value, checked) => alert(`${value} - ${checked}`)}>
  <ChecklistItem label="Update 1" value="update1" />
  <ChecklistItem label="Update 2" value="update2" />
  <ChecklistItem label="Update 3" value="update3" />
</Checklist>

Copy

onChange handles changes whenever a user selects or unselects an item.

Event 1Event 2Event 3

Selected: None

function Home() {
  const [selected, setSelected] = useState<(string | number)[] | undefined>([]);
  return (
    <div>
      <Checklist name="Events" onChange={setSelected}>
        <ChecklistItem label="Event 1" value="event1" />
        <ChecklistItem label="Event 2" value="event2" />
        <ChecklistItem label="Event 3" value="event3" />
      </Checklist>
    </div>
    <p>Selected: {selected?.join(", ") || "None"}</p>
  )
}

Copy

On Change

The onChange event is triggered when the value has changed. The following arguments are passed to the event handler:

Name	Type	Sample
event	Event Object	see: Change Event

On Update

The onUpdate event is triggered when the value has been updated. The following arguments are passed to the event handler:

Name	Type	Sample
value	string	`foobar`

Disabled

You can disable the checklist, preventing them from being selected: disabled.

Disabled 1Disabled 2Disabled 3

<Checklist name="Disabled" disabled>
  <ChecklistItem label="Disabled 1" value="disabled1" />
  <ChecklistItem label="Disabled 2" value="disabled2" />
  <ChecklistItem label="Disabled 3" value="disabled3" />
</Checklist>

Copy

Errors

You can pass the error prop to highlight the Checklist field red.

Error 1Error 2Error 3

<Checklist name="Errors" defaultValue={["error1"]} error>
  <ChecklistItem label="Error 1" value="error1" />
  <ChecklistItem label="Error 2" value="error2" />
  <ChecklistItem label="Error 3" value="error3" />
</Checklist>

Copy

Custom Styles

Colors

You can change the color of the checklist using: color='green' or color='#00FF00'.

Color 1Color 2Color 3

<Checklist name="Colors" defaultValue={["color1"]} color="green">
  <ChecklistItem label="Color 1" value="color1" />
  <ChecklistItem label="Color 2" value="color2" />
  <ChecklistItem label="Color 3" value="color3" />
</Checklist>

Copy

You may also change the individual color of the checkboxes:

GrayGreenPurple

<Checklist name="check-color" defaultValue={["gray", "green", "purple"]} >
  <ChecklistItem label="Gray" value="gray" color="#333" />
  <ChecklistItem label="Green" value="green" color="green" />
  <ChecklistItem label="Purple" value="purple" color="purple" />
</Checklist>

Copy

Checkbox

Code Editor