Native select

<.native_select
  name="countries"
  space="small"
  color="danger"
  description="This is description"
  label="This is outline label"
>
</.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>

Native select multiple props

The multiple attribute is a boolean prop that allows users to select more than one option from a dropdown or list. When this attribute is set to true, the select input becomes a multi-select field, enabling users to choose multiple values simultaneously. This is particularly useful in scenarios where multiple selections are required, such as choosing multiple categories or tags. Without the multiple attribute, the select field restricts the user to a single choice.

<.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>