Salad UI

Input

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

Read more Read less

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)
Basic inputs Open in playground 
<.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>