Select

This is Twig implementation of the Select component.

The placeholder for the select element is handled in a different way than other form fields. We add the first option item without a value with the selected attribute. You can also use the disabled attribute if the select field is mandatory.

Basic example usage:

                                                
                                                <Select id="selectDefault" label="Label" name="selectDefault">
                                                  <option value="" selected>Placeholder</option>
                                                  <option value="1">Option 1</option>
                                                  <option value="2">Option 2</option>
                                                </Select>

Usage with isRequired attribute:

                                                
                                                <Select id="selectRequired" label="Label" name="selectRequired" isRequired>
                                                  <option value="" selected disabled>Placeholder</option>
                                                  <option value="1">Option 1</option>
                                                  <option value="2">Option 2</option>
                                                </Select>

Without lexer:

                                                
                                                {% embed "@spirit/select.twig" with { props: {
                                                    id: 'selectEmbed'
                                                    name: 'selectEmbed'
                                                    label: 'Label'
                                                    isRequired: true
                                                }} %}
                                                    {% block content %}
                                                      <option value="" selected disabled>Placeholder</option>
                                                      <option value="1">Option 1</option>
                                                      <option value="2">Option 2</option>
                                                    {% endblock %}
                                                {% endembed %}

API

Name	Type	Default	Required	Description
helperText	string	null	✕	Custom helper text
id	string	—	✔	Select and label identification
inputProps	string[]	[]	✕	Pass additional attributes to the select element
isDisabled	bool	false	✕	If true, select is disabled
isFluid	bool	false	✕	If true, the element spans to the full width of its parent
isLabelHidden	bool	false	✕	If true, label is hidden
isRequired	bool	false	✕	If true, select is required
label	string	—	✔*	Label text
name	string	null	✕	Select name
UNSAFE_helperText	string	null	✕	Unescaped custom helper text
UNSAFE_label	string	—	✔*	Unescaped label text
UNSAFE_validationText	[string | string[]]	null	✕	Unescaped validation text
validationState	Validation dictionary	null	✕	Type of validation state.
validationText	[string | string[]]	null	✕	Validation text

(*) The label is required for this component. Use label or UNSAFE_label to set the label.

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.