<.input id="input-single-default" name="default" value=""/>

<.input id="input-single-with-label-and-placeholder" label="User" name="with_placeholder" placeholder="John Doe" value=""/>

<.input id="input-single-with-label-and-value" label="Labeled:" name="label" value="entered value"/>

<.input icon="search" id="input-single-with-icon" label="Search" name="with_icon" placeholder="Type to search" value=""/>

<.input disabled name="disabled" value="" />

<.input error="Fix me!" id="input-single-with-error" name="error" value=""/>

<.input errors={["Fix me!", "Fix me too!"]} id="input-single-with-multiple-errors" name="error" value="invalid value"/>

<.input field={%FormField{id: "with_field_errors", name: "with_field_errors", errors: [{"error msg", %{}}], field: "with_field_errors", form: nil, value: "invalid value"}} id="input-single-with-field-errors" name="error"/>

<.input id="input-single-with-placeholder" label="email" name="email" placeholder="test@bd.com" type="email" value={nil}/>

<.input id="input-single-textarea" name="textarea" type="textarea" value=""/>

<.textarea name="area", value="" />

<.input id="input-single-select" name="select" options={["Option 1", "Option 2"]} prompt="Select one" type="select" value=""/>

<.select name="select" value="" options={["Admin": "admin", "User": "user"]} />

<.input id="input-single-checkbox" label="check me" name="default" type="checkbox" value={false}/>

<.checkbox name="default" label="check me" value="false" />

<.checkbox disabled name="default" label="disabled" value="false"/>

<.input error="error" id="input-single-checkbox-with-error" label="check me" name="default" type="checkbox" value={false}/>

<.input id="input-single-checkgroup" name="checkgroup" options={[{"German", "de_DE"}, {"Swiss German", "de_CH"}, {"English", "en_GB"}]} type="checkgroup" value={[]}/>

<.input id="input-single-checkgroup-with-width" name="checkgroup" options={[{"German", "de_DE"}, {"Swiss German", "de_CH"}, {"English", "en_GB"}]} type="checkgroup" value={[]} width="w-full"/>

<.input field={%FormField{id: "checkgroup_with_label", name: "checkgroup_with_label", errors: [], field: "language", form: nil, value: ["de_DE"]}} id="input-single-checkgroup-with-label" label="Languages" name="checkgroup_with_label" options={[{"German", "de_DE"}, {"Swiss German", "de_CH"}, {"English", "en_GB"}]} type="checkgroup"/>

<.input field={%FormField{id: "checkgroup_with_label", name: "checkgroup_with_label", errors: [], field: "language", form: nil, value: ["de_DE", "de_CH"]}} id="input-single-checkgroup-with-max-selections" label="Languages" max_selections={2} name="checkgroup_with_label" options={[{"German", "de_DE"}, {"Swiss German", "de_CH"}, {"English", "en_GB"}]} type="checkgroup"/>

<.input id="input-single-checkgroup-horizontal" label="Languages" name="checkgroup_horizontal" options={[{"German", "de_DE"}, {"Swiss German", "de_CH"}, {"English", "en_GB"}]} orientation="horizontal" type="checkgroup" value={["de_DE", "en_GB"]}/>

<.input id="input-single-checkgroup-inline" label="Languages" name="checkgroup_horizontal" options={[{"German", "de_DE"}, {"Swiss German", "de_CH"}, {"English", "en_GB"}]} orientation="inline" type="checkgroup" value={["de_DE", "en_GB"]}/>

<.input error="Choose at least one language." id="input-single-checkgroup-with-error" label="Languages" name="checkgroup_with_error" options={[{"German", "de_DE"}, {"Swiss German", "de_CH"}, {"English", "en_GB"}]} type="checkgroup" value={[]}/>

<.checkgroup
  name="checkgroup_convenience"
  label="Languages"
  value={["de_CH"]}
  options={[{"German", "de_DE"}, {"Swiss German", "de_CH"}, {"English", "en_GB"}]}
/>

<.checkgroup
  disabled
  name="checkgroup_disabled"
  label="Languages"
  value={["de_CH"]}
  options={[{"German", "de_DE"}, {"Swiss German", "de_CH"}, {"English", "en_GB"}]}
/>

<.checkgroup
  borderless
  name="checkgroup_disabled"
  label="Languages"
  value={["de_CH"]}
  options={[{"German", "de_DE"}, {"Swiss German", "de_CH"}, {"English", "en_GB"}]}
/>

<.input id="input-single-radio" label="Radio" name="radio" option="gogo" type="radio" value="gaga"/>

<.input id="input-single-radio-selected" label="Radio" name="radio_selected" option="gaga" type="radio" value="gaga"/>

<.input border id="input-single-radio-selected-with-border" label="Radio" name="radio_selected_with_border" option="gaga" type="radio" value="gaga"/>

<.input disabled={true} id="input-single-radio-disabled" label="Radio" name="radio" option="gogo" type="radio" value="gaga"/>

<.input disabled={true} id="input-single-radio-selected-and-disabled" label="Radio" name="radio" option="gaga" type="radio" value="gaga"/>

<.input id="input-single-radiogroup" label="Language" name="radiogroup" options={[{"German", "de_DE"}, {"Swiss German", "de_CH"}, {"English", "en_GB"}]} type="radiogroup" value={[]}/>

<.input id="input-single-radiogroup-with-width" label="Loremsa" name="radiogroup" options={[{"Dolor", "a"}, {"Ispum", "b"}, {"Lorem ispum doro foo bar. Bla doz baz zumsel. Lorem ispum doro foo bar. Bla doz baz zumsel.", "c"}]} type="radiogroup" value={[]} width="w-full"/>

<.input id="input-single-radiogroup-horizontal" label="Language" name="radiogroup_horizontal" options={[{"German", "de_DE"}, {"Swiss German", "de_CH"}, {"English", "en_GB"}]} orientation="horizontal" type="radiogroup" value="de_DE"/>

<.input id="input-single-radiogroup-inline" label="Language" name="radiogroup_horizontal" options={[{"German", "de_DE"}, {"Swiss German", "de_CH"}, {"English", "en_GB"}]} orientation="inline" type="radiogroup" value="de_DE"/>

<.input field={%FormField{id: "with_field_errors", name: "with_field_errors", errors: [{"Please select a language.", %{}}], field: "with_field_errors", form: nil, value: "invalid value"}} id="input-single-radiogroup-with-error" label="Language" name="error" options={[{"German", "de_DE"}, {"Swiss German", "de_CH"}, {"English", "en_GB"}]} orientation="horizontal" type="radiogroup"/>

<.input disabled={true} id="input-single-radiogroup-disabled" label="Language" name="radiogroup" options={[{"German", "de_DE"}, {"Swiss German", "de_CH"}, {"English", "en_GB"}]} type="radiogroup" value={[]}/>