Select

New

Overview

A native select for choosing a value from a list of options.

Role

This controls the member's workspace permissions.

HEEx

<div class="example-fields w-full">
  <Select.select
    id="example-role"
    name="role"
    label="Role"
    prompt="Select a role"
    description="This controls the member's workspace permissions."
    options={[{"Administrator", "admin"}, {"Member", "member"}, {"Viewer", "viewer"}]}
  />
</div>

Errors

When bound with field, validation errors render beneath the select.

HEEx

<.form
  :let={form}
  for={to_form(%{"role" => ""}, errors: [role: {"can't be blank", []}])}
  id="example-select-errors-form"
  class="example-fields w-full"
>
  <Select.select
    field={form[:role]}
    label="Role"
    prompt="Select a role"
    options={[{"Administrator", "admin"}, {"Member", "member"}, {"Viewer", "viewer"}]}
  />
</.form>

Add this module

terminal

mix dizzy.add select

Component API

Select.select

Attributes

Attributes for Select.select
Name	Type	Default	Values
`class`	`:any`	nil	—
`description`	`:string`	nil	—
`disabled`	`:boolean`	false	—
`errors`	`:list`	[]	—
`field`	`{:struct, Phoenix.HTML.FormField}`	nil	—
`id`	`:string`	nil	—
`label`	`:string`	nil	—
`multiple`	`:boolean`	false	—
`name`	`:string`	nil	—
`options`	`:list`	Required	—
`prompt`	`:string`	nil	—
`required`	`:boolean`	false	—
`rest`	`:global`	nil	—
`value`	`:any`	nil	—