Checkbox

Checkbox enables the user to check/uncheck choice.

Checkbox enables the user to check/uncheck choice. It has input, a label, and an optional helperText. It could be disabled or have a validation state. The label could be hidden and show if the input is required.

Examples

examples

import { Checkbox } from "@seduo/design-system";
...
<Checkbox id="checkboxfield1" name="example" label="Label of checked input with validation" isRequired isChecked validationState="danger" validationText="validation failed" />
<Checkbox id="checkboxfield2" name="example2" label="Label of input with indeterminate" value="Filled" />
<Checkbox id="checkboxfield3" name="example3" label="Label of input with validation disabled" isRequired isDisabled validationState="danger" validationText="validation failed" />
<Checkbox id="checkboxfield4" name="example4" label="Label of checked input disabled" isChecked isDisabled />
<Checkbox id="checkboxfield5" name="example5" label="Label of unchecked input" />
<Checkbox id="checkboxfield6" name="example6" label="Label of checked input" isChecked />

{% include "@seduo-design-system/checkbox.twig" with { props: {
    id: 'example',
    name: 'example',
    label: 'Checkbox label text',
    isRequred: true,
    isChecked: true,
}} %}

<Checkbox id="checkboxfield1" name="example" label="Label of checked input with validation" isRequired isChecked validationState="danger" validationText="validation failed" />
<Checkbox id="checkboxfield2" name="example2" label="Label of input with indeterminate" value="Filled" />
<Checkbox id="checkboxfield3" name="example3" label="Label of input with validation disabled" isRequired isDisabled validationState="danger" validationText="validation failed" />
<Checkbox id="checkboxfield4" name="example4" label="Label of checked input disabled" isChecked isDisabled />
<Checkbox id="checkboxfield5" name="example5" label="Label of unchecked input" />
<Checkbox id="checkboxfield6" name="example6" label="Label of checked input" isChecked />

API for React

Name	Type	Default	Required	Description
`autoComplete`	`string`	-	No	Automated assistance in filling
`helperText`	`string`	-	No	Custom helper text
`id`	`string`	-	Yes	Input and label identification
`isDisabled`	`boolean`	-	No	Whether is field disabled
`isChecked`	`boolean`	-	No	Whether is field checked
`isItem`	`boolean`	-	No	To render in Item mode
`isLabelHidden`	`boolean`	-	No	Whether is label hidden
`isRequired`	`boolean`	-	No	Whether is field required
`label`	`string`	-	No	Label text
`name`	`string`	-	No	Input name
`ref`	`ForwardedRef<HTMLInputElement>`	-	No	Input element reference
`validationState`	Validation dictionary	-	No	Type of validation state.
`validationText`	`string`, `string[]`	-	No	Validation text
`value`	`string`	-	No	Input value

API for Twig

Name	Type	Default	Required	Description
`autocomplete`	`string`	`null`	No	Automated assistance in filling
`helperText`	`string`	`null`	No**	Custom helper text
`id`	`string`	`null`	No	Input and label identification
`inputProps`	`string[]`	`[]`	No	Pass additional attributes to the input element
`isChecked`	`bool`	`false`	No	If true, input is checked
`isDisabled`	`bool`	`false`	No	If true, input is disabled
`isItem`	`bool`	`false`	No	To render in Item mode
`isLabelHidden`	`bool`	`false`	No	If true, label is hidden
`isRequired`	`bool`	`false`	No	If true, input is required
`label`	`string`	-	Yes*	Label text
`name`	`string`	`null`	No	Input name
`UNSAFE_helperText`	`string`	`null`	No**	Unescaped custom helper text
`UNSAFE_label`	`string`	-	Yes*	Unescaped label text (allows HTML)
`UNSAFE_validationText`	[`string` \| `string[]`]	`null`	No**	Unescaped validation text
`validationState`	Validation dictionary	`null`	No	Type of validation state.
`validationText`	[`string` \| `string[]`]	`null`	No**	Validation text
`value`	`string`	`null`	No	Input value

(*) Label is required. You can use the label for simple text or UNSAFE_label for HTML content. (**) Props with and without UNSAFE_ prefix are mutually exclusive.

On top of the API options, the components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.

On this page