Checkbox

The Checkbox component is a UI element that allows users to select one or more options from a set. It consists of a small square box and a label. When selected, a checkmark appears inside the box.
Checkboxes are commonly used in forms, settings, and surveys to enable users to make binary choices.

Markdown docs

Checkbox

This is Twig implementation of the Checkbox component.

Basic example usage:


                                                
                                                <Checkbox id="checkbox-default" label="Label" name="checkboxDefault" />

Advanced example usage:


                                                
                                                <Checkbox
                                                  id="checkbox-advanced"
                                                  isChecked
                                                  isRequired
                                                  validationText="validation text"
                                                  name="checkboxAdvanced"
                                                  validationState="danger"
                                                  helperText="Helper text"
                                                />

Without lexer:


                                                
                                                {% embed "@spirit/checkbox.twig" with { props: {
                                                    id: "checkbox-embed",
                                                    label: "some label",
                                                    name: "checkboxEmbed",
                                                    isRequired: "true",
                                                    validationState: "danger",
                                                    validationText: "validation text",
                                                    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
isRequired	bool	false	✕	If true, input is required
label	string	—	✓*	Label text
name	string	null	✕	Input name
UNSAFE_helperText	string	null	✕**	Unescaped custom helper text
UNSAFE_label	string	—	✓*	Unescaped label text (allows HTML)
UNSAFE_validationText	[string \| string[]]	null	✕**	Unescaped validation text
validationState	Validation dictionary	null	✕	Type of validation state.
validationText	[string \| string[]]	null	✕**	Validation text
value	string	null	✕	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.

Example

https://raw.githubusercontent.com/lmc-eu/spirit-design-system/main/packages/web-twig/src/Resources/components/Button/README.md