@wedgekit/checkbox-list
v4.1.4
Published
## Purpose
Downloads
18
Maintainers
Keywords
Readme
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
import CheckboxList, { Option } from '@wedgekit/checkbox-list';
const Example = () => {
const [value, setValue] = React.useState([]);
return (
<CheckboxList
label="My CheckboxList"
options={[
{ label: 'Option 1', id: 'Option1' },
{ label: 'Option 2', id: 'Option2' },
{ label: 'Option 3', id: 'Option3' },
]}
value={value}
onChange={setValue}
/>
);
};
render(<Example />);
Props
allowMultiple
Type: boolean
Required: ❌
Allows more than one option to be selected, defaults to true
className
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.
options
Type:
{
id: string | number,;
label: string;
disabled?: boolean;
}[]
Required: ✅
disabled
Type: boolean
Required: ❌
filter
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.
ref
Type: React.Ref
Required: ❌
The forwarded ref giving a user access to the underlying HTML input.
label
Type: string
Required: ✅
Aria compliant text for all child components to be 'labeled-by', required on all wedgekit components.
tabIndex
Type: number
Required: ❌
Sets the tabIndex for the listbox element. Default: tabIndex={0}
value
Type: (string | number)[]
Required: ✅
An array of Option
id
s used signify which Option
s should display as 'checked'.
onBlur
Type: (event:React.FocusEvent) => void
Required: ❌
onChange
Type: (value:(string | number)[], event: React.ChangeEvent<HTMLInputElement) => void
Required: ✅
Function that will fire when a checkbox value is changed.
onKeyDown
Type: (event: SyntheticEvent<*>) => void
Required: ❌
An optional callback when a key is pressed