Forms.native_select · Cinder UI

`Forms.native_select`

Server-rendered

Renders a native <select> element with shadcn styles.

Use this when you want platform-native select behavior rather than the custom listbox UI from select/1.

Native select

  <.native_select name="framework" value="phoenix">
  <:option value="phoenix" label="Phoenix" />
  <:option value="rails" label="Rails" />
  <:option value="laravel" label="Laravel" />
</.native_select>

With placeholder

  <.native_select name="assignee" placeholder="Assign a teammate">
  <:option value="levi" label="Levi" />
  <:option value="juz" label="Justin" />
</.native_select>

With FormField (using options attr)

Phoenix shim

  <.native_select field={@form[:role]} options={[{"Admin", "admin"}, {"Member", "member"}]} />

With FormField (using option slots)

Phoenix shim

  <.native_select field={@form[:role]}>
  <:option value="admin" label="Admin" />
  <:option value="member" label="Member" />
</.native_select>

With label

Phoenix shim

Role

  <.native_select field={@form[:role]} label="Role" options={[{"Admin", "admin"}]} />

With explicit errors

Phoenix shim

Role

is required

  <.native_select field={@form[:role]} label="Role" errors={["is required"]} options={[{"Admin", "admin"}]} />

Inside field composition

Phoenix shim

Role

Choose your access level.

  <.field>
  <:label for={@form[:role].id}>Role</:label>
  <.native_select field={@form[:role]} options={[{"Admin", "admin"}]} />
  <:description>Choose your access level.</:description>
</.field>

Attributes

Name	Type	Default	Values	Global Includes
`class`	`:string`	—	—	—
`errors`	`:list`	—	—	—
`field`	`{:struct, Phoenix.HTML.FormField}`	—	—	—
`id`	`:string`	—	—	—
`label`	`:string`	—	—	—
`name`	`:string`	—	—	—
`options`	`:list`	—	—	—
`placeholder`	`:string`	`"Choose an option"`	—	—
`rest`	`:global`	—	—	—
`value`	`:string`	—	—	—

Slots

Slot	Slot Attributes
`option`	`value` (:string) Required `label` (:string) Required