Radio

A Radio component allows users to select one option from a set of mutually exclusive choices. It is typically presented as a group of circular buttons where only one can be selected at a time.

Markdown docs

Radio

This is Twig implementation of the Radio component.

Basic example usage:


                                                
                                                <Radio id="radio-default" label="Label" name="radioDefault" isChecked />

Advanced example usage:


                                                
                                                <Radio
                                                  id="radio-advanced"
                                                  label="some label"
                                                  isChecked
                                                  name="radioAdvanced"
                                                  validationState="danger"
                                                  helperText="Helper text"
                                                  autocomplete="off"
                                                />

Without lexer:


                                                
                                                {% embed "@spirit/radio.twig" with { props: {
                                                    id: "radioEmbed",
                                                    label: "some label",
                                                    name: "radioEmbed",
                                                    isChecked: "true",
                                                    validationState: "danger",
                                                    helperText: "Helper text",
                                                }} %}

API

Name	Type	Default	Required	Description
autocomplete	string	null	✕	Automated assistance in filling
helperText	string	null	✕	Custom helper text
id	string	null	✕	Input and label identification
inputProps	string[]	[]	✕	Pass additional attributes to the input element
isChecked	bool	false	✕	If true, input is checked
isDisabled	bool	false	✕	If true, input is disabled
isItem	bool	false	✕	To render in Item mode
isLabelHidden	bool	false	✕	If true, label is hidden
label	string	—	✓*	Label text
name	string	null	✕	Input name
UNSAFE_helperText	string	null	✕	Unescaped custom helper text
UNSAFE_label	string	—	✓*	Unescaped label text
validationState	Validation dictionary	null	✕	Type of validation state
value	string	null	✕	Input value

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

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.

Radio

Markdown docs

Radio

API

Example