Mishka
Chelekom

Native select

v0.0.10

v0.0.10StableComponentStatelessApache-2.0
Installation mix mishka.ui.gen.component native_select
Source View Source

Native select

Native select

Please choose a programming language

Native select

Native select
Native select shadow variant
Native select default variant
Native select bordered variant
heex
<.native_select
  name="countries"
  space="small"
  color="danger"
  description="This is description"
  label="This is outline label"
>
</.native_select>

Native select multiple props

Native select multiple props

Choose multiple items
heex
<.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 option slot

This is description
heex
<.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>