Phenix Storybook

Pick a theme

Displays Riders

Select

Single select Open in playground 
<.phx_form_for for={%{}} as={:story} :let={f} class="h-48">
  <.select_input_group form={f} id="select-single-single-select" label="Please select a shop kind" options={[%{value: "Hair dresser"}, %{value: "Barbershop"}, %{value: "Restaurant"}]} field={:select} placeholder="Pick a value"/>
</.phx_form_for>
Single select with label and placeholder Open in playground 
<.phx_form_for for={%{}} as={:story} :let={f} class="h-48">
  <.select_input_group form={f} id="select-single-single-select-with-label-and-placeholder" label="Please select a shop kind" value={1} options={[%{id: 0, value: "Barbershop", icon: "fa fa-scissors"}, %{id: 1, value: "Restaurant", icon: "fa fa-fork-knife"}, %{id: 2, value: "Garage", icon: "fa fa-car-wrench"}]} field={:select}/>
</.phx_form_for>
Single select disabled Open in playground 
<.phx_form_for for={%{}} as={:story} :let={f} class="h-48">
  <.select_input_group form={f} disabled id="select-single-single-select-disabled" label="Please select a shop kind" value={1} options={[%{id: 0, value: "Barbershop"}, %{id: 1, value: "Restaurant"}, %{id: 2, value: "Garage"}]} field={:select} hint="You can't do anything"/>
</.phx_form_for>
Multiple select Open in playground 
<.phx_form_for for={%{}} as={:story} :let={f} class="h-48">
  <.select_input_group form={f} id="select-single-multiple-select" label="Please select numbers" value={[0]} mode={:multiple} options={[%{id: 0, value: "0"}, %{id: 1, value: "1"}, %{id: 2, value: "2"}]} field={:select} placeholder="Pick one or multiple values"/>
</.phx_form_for>
Invalid options Open in playground 
<.phx_form_for for={%{}} as={:story} :let={f} class="h-48">
  <.select_input_group form={f} id="select-single-invalid-options" label="Those are broken!" value={[0, 1, 2]} mode={:multiple} options={[%{id: 0, value: 0}, %{id: 1, value: ""}, %{id: 2, value: nil}]} field={:select}/>
</.phx_form_for>
Multiple select with value Open in playground 
<.phx_form_for for={%{}} as={:story} :let={f} class="h-48">
  <.select_input_group form={f} id="select-single-multiple-select-with-value" label="Please select shop kinds" value={[0, 1, 2]} mode={:multiple} options={[%{id: 0, value: "With really really really long options"}, %{id: 1, value: "this component will automatically", color: "#FBBF24"}, %{id: 2, value: "wrap to next line.", color: "#FBBF24"}]} field={:select}/>
</.phx_form_for>