Salad UI

Input

Renders a form input field or a component that looks like an input field.

Options

:id - The id to use for the input
:name - The name to use for the input
:value - The value to pre-populate the input with
:type - The type of input (text, email, password, etc.)
:default-value - The default value of the input
:field - A form field struct to build the input from
:class - Additional CSS classes to apply
:placeholder - Placeholder text (passed through as rest)
:disabled - Whether the input is disabled (passed through as rest)
:required - Whether the input is required (passed through as rest)
:readonly - Whether the input is readonly (passed through as rest)
:autocomplete - Hints for form autofill feature (passed through as rest)

<.simple_form :let={f} for={%{}} as={:story} class="w-full">
  <.input
    id="input-basic-inputs-text"
    label="Text input"
    type="text"
    placeholder="Text input"
  />
  <.input
    id="input-basic-inputs-number"
    label="Number input"
    type="number"
    placeholder="Number input"
  />
  <.input
    id="input-basic-inputs-date"
    label="Date input"
    type="date"
    placeholder="Date input"
  />
  <.input
    id="input-basic-inputs-color"
    label="Color input"
    type="color"
    placeholder="Color input"
  />
</.simple_form>