Docs

Cinder UI

GitHub Hex
Original shadcn/ui docs ↗

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.

With FormField (using options attr)

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

With FormField (using option slots)

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

With label

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

With explicit errors

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

Inside field composition

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

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>

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