Markdown docs

Checkbox

This is Twig implementation of the Checkbox component.

Basic example usage:


                                                
                                                <Checkbox id="checkboxDefault" label="Label" name="checkboxDefault" />

Advanced example usage:


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

Without lexer:


                                                
                                                {% embed "@spirit/checkbox.twig" with { props: {
                                                    id: "checkboxEmbed",
                                                    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