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.

Example