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 totrue
.options
- The options passed toPhoenix.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>
"""