Certain props are shared across all form-related components, and you can find them in the form wrapper.
By using the class prop, you can apply custom classes or Tailwind CSS classes to customize the appearance and behavior of the gallery, allowing for flexible design changes.
Native select
<.native_select name="countries" space="small" color="danger" description="This is description" label="This is outline label" > </.native_select>
Native select multiple props
When selecting multiple options in a dropdown or list, you can hold down the
Shift
key to select a range of items or use the
Ctrl
key (or
Command
on Mac) to select individual items. For instance, if you select both
NL
and
UAE
, the output will appear as
cars=nl&cars=uae
. The output won’t give you an array; instead, each selection is added as a separate entry in the query string, separated by an
&
, making it easy to see all selected options in the final output. This format allows each selected value to be handled individually without grouping them into a single value or array.
<.native_select multiple name="countries" space="small" description="This is description" label="This is outline label" > <:option value="nl"> NL </:option> <:option value="usa"> USA </:option> <:option value="uae"> UAE </:option> </.native_select>
Native select option slot
The
option
slot within a select element is used to define individual options for the dropdown. Each option in the select is created within this slot and has three key attributes. The
value
attribute represents the value associated with the option, which will be submitted when the option is selected. The
selected
attribute can be used to indicate which option is currently selected by default, providing a pre-selected choice when the form is rendered. The
disabled
attribute, when set, will disable the option, preventing users from selecting it. These attributes make it easy to manage and customize each option within a select field, ensuring flexibility in form handling.
<.native_select name="countries" space="small" description="This is description" label="This is outline label" > <:option value="nl" selected> NL </:option> <:option value="usa" disabled> USA </:option> <:option value="uae"> UAE </:option> </.native_select>