A helper for setting the underlaying element of a component

Attributes

• element (:string) (required) - Must be one of "checkbox", or "radio_button".
• Global attributes are accepted. Supports all globals plus: ["name", "value", "id", "label", "disabled", "fill", "checked", "help_text", "aria_described_by", "phx_change", "phx_click", "phx_values", "tone"].

A choice list lets you create a list of grouped radio buttons or checkboxes. Use this component if you need to group together a related list of interactive choices.

Examples

  <.choice_list name="checkout" title="While the customer is checking out" allow_multiple>
    <:choice label="Choice A" value="a"/>
    <:choice label="Choice B" value="b"/>
    <:choice label="Choice C" value="c"/>
  </.choice_list>

  <.choice_list label="Status" name={f[:status].name} allow_multiple={false}>
    <:choice
      :for={choice <- Ecto.Enum.dump_values(Schema.Section, :status)}
      label={choice |> Macro.camelize()}
      value={choice}
      selected={f[:status].value == String.to_atom(choice)}
    />
  </.choice_list>

See

• https://polaris.shopify.com/components/selection-and-input/choice-list
• https://github.com/Shopify/polaris/blob/main/polaris-react/src/components/ChoiceList/ChoiceList.tsx

Attributes

• id (:string)
• field (Phoenix.HTML.FormField) - The Phoenix Form Field. Defaults to nil.
• title (:string) - Label for list of choices.
• name (:string) - Name for form input.
• allow_multiple (:boolean) - Allow merchants to select multiple options at once. Defaults to true.
• title_hidden (:boolean) - Toggles display of the title. Defaults to false.
• error (:string) - Display an error message.
• disabled (:boolean) - Disable all choices. Defaults to false.
• phx_click (:any) - onClick: Callback when the choices are clicked. Defaults to nil.
• phx_change (:any) - onChange: Callback when the selected choices change. Defaults to nil.
• tone (:string) - Indicates the tone of the choice list. Defaults to nil.

Slots

• choice - Collection of choices. Accepts attributes:
  • value (:string) - Value of the choice.
  • label (:string) - Label for the choice.
  • id (:string) - A unique identifier for the choice.
  • disabled (:boolean) - Disable choice.
  • help_text (:string) - Additional text to aide in use.
  • selected (:string) - The choice is selected.
  • described_by_error (:boolean) - Indicates that the choice is aria-describedBy the error message.