Radio

Use Radio when you have a group of mutually exclusive choices and only one selection from the group is allowed. It has input and label. It can be disabled or have an error state. The label can be hidden.

Examples

examples

import { Radio } from "@seduo/design-system";
...
<Radio id="example" name="example" label="Label text" isChecked />
<Radio id="example2" name="example" label="Label text" />
<Radio id="example3" name="example" label="Label text" isDisabled />

<Radio id="example" name="example" label="Label text" isChecked />
<Radio id="example2" name="example" label="Label text" />
<Radio id="example3" name="example" label="Label text" isDisabled />

API for React

Name	Type	Default	Required	Description
`autoComplete`	`string`	-	no	Automated assistance in filling
`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
`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
`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
`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
`validationState`	Validation dictionary	`null`	no	Type of validation state
`value`	`string`	`null`	no	Input value

(*) Label is required. You can use the label for simple text or UNSAFE_label for HTML content.

On this page