BitstylesPhoenix.Component.Form.ui_select

You're seeing just the function ui_select, go back to BitstylesPhoenix.Component.Form module for more information.

Renders a <select> element, with a <label> and any errors for that field.

Attributes

  • hidden_label - Only show the label for screen readers if set to true.
  • options - The options passed to Phoenix.HTML.Form.select/4.
  • All options from above (see top level module doc).
  • All other attributes will be passed in as input options to Phoenix.HTML.Form.select/4.

See the bitstyles select docs for examples of textareas and labels in use.

Select box

iex> assigns=%{form: @form}
...> render ~H"""
...> <.ui_select form={@form} field={:week} options={1..2} />
...> """
"""
<label for="user_week">
  Week
</label>
<select id="user_week" name="user[week]">
  <option value="1">
    1
  </option>
  <option value="2">
    2
  </option>
</select>
"""

Select box required

iex> assigns=%{form: @form}
...> render ~H"""
...> <.ui_select form={@form} field={:week} options={1..2} required />
...> """
"""
<label for="user_week">
  Week
  <span aria-hidden="true" class="u-fg-warning u-margin-xxs-left">
    *
  </span>
</label>
<select id="user_week" name="user[week]" required="required">
  <option value="1">
    1
  </option>
  <option value="2">
    2
  </option>
</select>
"""

Select box without label

iex> assigns=%{form: @form}
...> render ~H"""
...> <.ui_select form={@form} field={:week} options={1..2} hidden_label/>
...> """
"""
<label class="u-sr-only" for="user_week">
  Week
</label>
<select id="user_week" name="user[week]">
  <option value="1">
    1
  </option>
  <option value="2">
    2
  </option>
</select>
"""

Select box with options

iex> assigns=%{form: @form, options: [{"Ducks", "ducks"}, {"Cats", "cats"}]}
...> render ~H"""
...> <.ui_select form={@form} field={:preference} options={@options} label="What do you like best?" label_opts={[class: "extra"]}/>
...> """
"""
<label class="extra" for="user_preference">
  What do you like best?
</label>
<select id="user_preference" name="user[preference]">
  <option value="ducks">
    Ducks
  </option>
  <option value="cats">
    Cats
  </option>
</select>
"""