<div class="flex flex-col gap-5 w-full">
  <.input bordered id="input-basic-inputs-text" placeholder="Text input" type="text"/>
  <.input
    bordered
    id="input-basic-inputs-textarea"
    placeholder="Textarea input"
    type="textarea"
  />
  <.input bordered id="input-basic-inputs-number" placeholder="Number input" type="number"/>
  <.input bordered id="input-basic-inputs-date" placeholder="Date input" type="date"/>
  <.input bordered id="input-basic-inputs-color" placeholder="Color input" type="color"/>
  <.input bordered id="input-basic-inputs-range" placeholder="Range input" type="range"/>
  <.input
    bordered
    id="input-basic-inputs-checkbox"
    placeholder="Checkbox input"
    type="checkbox"
  />
  <.input bordered id="input-basic-inputs-radio" placeholder="Radio input" type="radio"/>
</div>

<div class="flex flex-col gap-5 w-full">
  <.input
    bordered
    id="input-single-select"
    label="Select input"
    options={["Option 1", "Option 2", "Option 3"]}
    type="select"
  />
</div>