CheckboxList

Purpose

The CheckboxList is a reuseable, aria-compliant list of checkboxes. Wedgekit uses CheckboxList in the SwitchGroup from '@wedgekit/switch-group' and the Multiselect from '@wedgekit/select'.

Basic Implementation

``jsx
import CheckboxList, { Option } from '@wedgekit/checkbox-list';

const Example = () => {
const [value, setValue] = React.useState([]);

return (
label="My CheckboxList"
options={[
{ label: 'Option 1', id: 'Option1' },
{ label: 'Option 2', id: 'Option2' },
{ label: 'Option 3', id: 'Option3' },
]}
value={value}
onChange={setValue}
/>
);
};

render();
`

Props

$3

Type: boolean

Required: ❌

Allows more than one option to be selected, defaults to true

$3

Type: string

Required: ❌

This is exposed but is only here so that styled-components will be able to style components correctly. Please do not use this unless you really know what you are doing.

$3

Type:

`typescript static
{
id: string | number,;
label: string;
disabled?: boolean;
}[]
`

Required: ✅

$3

Type: boolean

Required: ❌

$3

Type: string

Required: ❌

CheckboxList can be provided a filter to control which options are shown to the user. Options will be filtered based on their label prop. Filtered options are not visible, but will remain selected as part of CheckboxList's value if it was selected before being filtered.

$3

Type: React.Ref

Required: ❌

The forwarded ref giving a user access to the underlying HTML input.

$3

Type: string

Required: ✅

Aria compliant text for all child components to be 'labeled-by', required on all wedgekit components.

$3

Type: number

Required: ❌

Sets the tabIndex for the listbox element. Default: tabIndex={0}

$3

Type: (string | number)[]

Required: ✅

An array of Option ids used signify which Options should display as 'checked'.

$3

Type: (event:React.FocusEvent) => void

Required: ❌

$3

Type: (value:(string | number)[], event: React.ChangeEvent void

Required: ✅

Function that will fire when a checkbox value is changed.

$3

Type: (event: SyntheticEvent<*>) => void`

Required: ❌

An optional callback when a key is pressed