<.form for={@form}>
  <.field field={@form[:name]} />
  <.field type="email" field={@form[:email]} />

  <!-- Without a field  -->
  <.field label="Favourite pudding" value="mcdonalds" name="favourite_pudding" errors={["not a pudding!"]} />

  <.field type="password" field={@form[:password]} />
  <.field
    type="radio-group"
    options={[Male: "male", Female: "female", Other: "other"]}
    field={@form[:gender]}
  />
  <div class="flex justify-end gap-3">
    <.button type="button" label="Cancel" color="white" />
    <.button type="submit" label="Submit" />
  </div>
</.form>

        

          attr :id, :any,
default: nil,
doc: "the id of the input. If not passed, it will be generated automatically from the field"

attr :name, :any,
doc: "the name of the input. If not passed, it will be generated automatically from the field"

attr :label, :string,
doc:
  "the label for the input. If not passed, it will be generated automatically from the field"

attr :value, :any,
doc:
  "the value of the input. If not passed, it will be generated automatically from the field"

attr :type, :string,
default: "text",
values:
  ~w(checkbox checkbox-group color date datetime-local email file hidden month number password
           range radio-group radio-card search select switch tel text textarea time url week),
doc: "the type of input"

attr :size, :string,
default: "md",
values: ~w(xs sm md lg xl),
doc: "the size of the switch (xs, sm, md, lg or xl) or radio card (sm, md or lg)"

attr :variant, :any, default: "outline", doc: "outline, classic - used by radio-card"

attr :viewable, :boolean,
default: false,
doc: "If true, adds a toggle to show/hide the password text"

attr :copyable, :boolean,
default: false,
doc: "If true, adds a copy button to the field and disables the input"

attr :clearable, :boolean,
default: false,
doc: "If true, adds a clear button to clear the field value"

attr :field, Phoenix.HTML.FormField,
doc: "a form field struct retrieved from the form, for example: @form[:email]"

attr :errors, :list,
default: [],
doc:
  "a list of errors to display. If not passed, it will be generated automatically from the field. Format is a list of strings."

attr :checked, :any, doc: "the checked flag for checkboxes and checkbox groups"
attr :prompt, :string, default: nil, doc: "the prompt for select inputs"
attr :options, :list, doc: "the options to pass to Phoenix.HTML.Form.options_for_select/2"
attr :multiple, :boolean, default: false, doc: "the multiple flag for select inputs"
attr :disabled_options, :list, default: [], doc: "the options to disable in a checkbox group"

attr :group_layout, :string,
values: ["row", "col"],
default: "row",
doc: "the layout of the inputs in a group (checkbox-group or radio-group)"

attr :empty_message, :string,
default: nil,
doc:
  "the message to display when there are no options available, for checkbox-group or radio-group"

attr :rows, :string, default: "4", doc: "rows for textarea"

attr :class, :any, default: nil, doc: "the class to add to the input"
attr :wrapper_class, :any, default: nil, doc: "the wrapper div classes"
attr :help_text, :string, default: nil, doc: "context/help for your field"
attr :label_class, :any, default: nil, doc: "extra CSS for your label"
attr :selected, :any, default: nil, doc: "the selected value for select inputs"

attr :required, :boolean,
default: false,
doc: "is this field required? is passed to the input and adds an asterisk next to the label"

attr :rest, :global,
include:
  ~w(autocomplete autocorrect autocapitalize disabled form max maxlength min minlength list
pattern placeholder readonly required size step value name multiple prompt default year month day hour minute second builder options layout cols rows wrap checked accept),
doc: "All other props go on the input"

        

          <.field field={@form[:text]} placeholder="Enter text" label="Clearable" type="text" clearable />

        

          <.field
  field={@form[:text]}
  placeholder="This is just a placeholder"
  value="https://example.com/invite/your-invite-code"
  label="Copyable"
  copyable
/>

        

          <.field
  type="password"
  field={@form[:password]}
  label="Viewable"
  placeholder="Placeholder"
  viewable
/>

        

          <.field field={@form[:field_name]} type="checkbox" />

<-- With help text -->
<.field field={@form[:field_name]} type="checkbox" help_text="Here is some help text" />

<-- Just in the input -->
<.input field={@form[:field_name]} type="checkbox" />

        

          <.field
  field={@form[:field_name]}
  type="checkbox-group"
  options={[{"Option 1", "1"}, {"Option 2", "2"}, {"Option 3", "3"}]}
/>

<!-- With col layout -->
<.field
  field={@form[:field_name]}
  type="checkbox-group"
  options={[{"Option 1", "1"}, {"Option 2", "2"}, {"Option 3", "3"}]}
  group_layout="col"
/>

<!-- With help text -->
<.field
  field={@form[:field_name]}
  type="checkbox-group"
  options={[{"Option 1", "1"}, {"Option 2", "2"}, {"Option 3", "3"}]}
  help_text="Here is some help text"
/>

<!-- With disabled options -->
<.field
  field={@form[:field_name]}
  type="checkbox-group"
  options={[{"Option 1", "1"}, {"Option 2", "2"}, {"Option 3", "3"}]}
  help_text="The second option is disabled"
  disabled_options={["2"]}
/>

        

          <.field field={@form[:field_name]} type="color" />

<!-- With help text -->
<.field field={@form[:field_name]} type="color" help_text="Here is some help text" />

<-- Just in the input -->
<.input field={@form[:field_name]} type="color" />

        

          <.field field={@form[:field_name]} type="date" />

<!-- With help text -->
<.field field={@form[:field_name]} type="date" help_text="Here is some help text" />

<-- Just in the input -->
<.input field={@form[:field_name]} type="date" />

        

          <.field field={@form[:field_name]} type="datetime-local" />

<!-- With help text -->
<.field field={@form[:field_name]} type="datetime-local" help_text="Here is some help text" />

<-- Just in the input -->
<.input field={@form[:field_name]} type="datetime-local" />

        

          <.field field={@form[:field_name]} type="email" />

<!-- With help text -->
<.field field={@form[:field_name]} type="email" help_text="Here is some help text" />

<-- Just in the input -->
<.input field={@form[:field_name]} type="email" />

        

          <.field field={@form[:field_name]} type="file" />

<!-- With help text -->
<.field field={@form[:field_name]} type="file" help_text="Here is some help text" />

<-- Just in the input -->
<.input field={@form[:field_name]} type="file" />

        

          <!-- This just renders the hidden input with no label -->
<.field field={@form[:field_name]} type="hidden" />

        

          <.field field={@form[:field_name]} type="number" />

<!-- With help text -->
<.field field={@form[:field_name]} type="number" help_text="Here is some help text" />

<-- Just in the input -->
<.input field={@form[:field_name]} type="number" />

        

          <.field field={@form[:field_name]} type="password" />

<!-- With help text -->
<.field field={@form[:field_name]} type="password" help_text="Here is some help text" />

<-- Just in the input -->
<.input field={@form[:field_name]} type="password" />

        

          <.field
  field={@form[:field_name]}
  type="radio-group"
  options={[{"Option 1", "1"}, {"Option 2", "2"}, {"Option 3", "3"}]}
/>

<!-- With a row layout -->
<.field
  field={@form[:field_name]}
  type="radio-group"
  options={[{"Option 1", "1"}, {"Option 2", "2"}, {"Option 3", "3"}]}
  group_layout="col"
/>

<!-- With help text -->
<.field
  field={@form[:field_name]}
  type="radio-group"
  options={[{"Option 1", "1"}, {"Option 2", "2"}, {"Option 3", "3"}]}
  help_text="Here is some help text"
/>

        

              <.field
  field={@form[:radio_card]}
  type="radio-card"
  label="Radio card"
  options={[
    %{label: "8-core CPU", value: "high", description: "32 GB RAM"},
    %{label: "6-core CPU", value: "mid", description: "24 GB RAM"},
    %{
      label: "4-core CPU",
      value: "low",
      description: "16 GB RAM",
      disabled: true
    }
  ]}
  size="sm"
  variant="outline"
  group_layout="row"
  help_text="Choose the plan that best suits your needs."
  required
/>
<.field
  field={@form[:radio_card]}
  type="radio-card"
  label="Radio card"
  options={[
    %{label: "8-core CPU", value: "high", description: "32 GB RAM"},
    %{label: "6-core CPU", value: "mid", description: "24 GB RAM"},
    %{
      label: "4-core CPU",
      value: "low",
      description: "16 GB RAM",
      disabled: true
    }
  ]}
  size="md"
  variant="classic"
  group_layout="row"
  help_text="Choose the plan that best suits your needs."
  required
/>
<.field
  field={@form[:radio_card]}
  type="radio-card"
  label="Radio card"
  options={[
    %{label: "8-core CPU", value: "high", description: "32 GB RAM"},
    %{label: "6-core CPU", value: "mid", description: "24 GB RAM"},
    %{
      label: "4-core CPU",
      value: "low",
      description: "16 GB RAM",
      disabled: true
    }
  ]}
  size="lg"
  variant="outline"
  group_layout="row"
  help_text="Choose the plan that best suits your needs."
  required
/>

        

          <.field field={@form[:field_name]} type="range" />

<!-- With help text -->
<.field field={@form[:field_name]} type="range" help_text="Here is some help text" />

<-- Just in the input -->
<.input field={@form[:field_name]} type="range" />

        

          <.field field={@form[:field_name]} type="search" />

<!-- With help text -->
<.field field={@form[:field_name]} type="search" help_text="Here is some help text" />

<-- Just in the input -->
<.input field={@form[:field_name]} type="search" />

        

          <.field
  field={@form[:field_name]}
  type="select"
  options={[{"Option 1", "1"}, {"Option 2", "2"}, {"Option 3", "3"}]}
/>

<!-- With a prompt -->
<.field
  field={@form[:field_name]}
  type="select"
  options={[{"Option 1", "1"}, {"Option 2", "2"}, {"Option 3", "3"}]}
  prompt="Select an option"
/>

<!-- With help text -->
<.field
  field={@form[:field_name]}
  type="select"
  options={[{"Option 1", "1"}, {"Option 2", "2"}, {"Option 3", "3"}]}
  help_text="Here is some help text"
/>

<!-- With multiple -->
<.field
  field={@form[:field_name]}
  type="select"
  options={[{"Option 1", "1"}, {"Option 2", "2"}, {"Option 3", "3"}]}
  multiple={true}
/>

<!-- Just in the input -->
<.input
  field={@form[:field_name]}
  type="select"
  options={[{"Option 1", "1"}, {"Option 2", "2"}, {"Option 3", "3"}]}
/>

        

              <.field
  type="switch"
  field={@form[:xs]}
  size="xs"
/>
<.field
  type="switch"
  field={@form[:sm]}
  size="sm"
/>
<.field
  type="switch"
  field={@form[:md]}
  size="md"
/>
<.field
  type="switch"
  field={@form[:lg]}
  size="lg"
/>
<.field
  type="switch"
  field={@form[:xl]}
  size="xl"
/>

<!-- With help text -->
<.field field={@form[:field_name]} type="switch" help_text="Here is some help text" />

<!-- Just in the input -->
<.input field={@form[:field_name]} type="switch" />

        

          <.field field={@form[:field_name]} type="tel" />

<!-- With help text -->
<.field field={@form[:field_name]} type="tel" help_text="Here is some help text" />

<!-- Just in the input -->
<.input field={@form[:field_name]} type="tel" />

        

          <.field field={@form[:field_name]} />

<!-- With a placeholder  -->
<.field field={@form[:field_name]} placeholder="eg. John" />

<!-- With help text -->
<.field field={@form[:field_name]} help_text="Here is some help text" />

<!-- Just the input  -->
<.input field={@form[:field_name]} placeholder="eg. John" />

        

          <.field field={@form[:field_name]} type="textarea" />

<!-- With help text -->
<.field field={@form[:field_name]} type="textarea" help_text="Here is some help text" />

<!-- Just the input  -->
<.input field={@form[:field_name]} type="textarea" />

        

          <.field field={@form[:field_name]} type="time" />

<!-- With help text -->
<.field field={@form[:field_name]} type="time" help_text="Here is some help text" />

<!-- Just in the input -->
<.input field={@form[:field_name]} type="time" />

        

          <.field field={@form[:field_name]} type="url" />

<!-- With help text -->
<.field field={@form[:field_name]} type="url" help_text="Here is some help text" />

<!-- Just in the input -->
<.input field={@form[:field_name]} type="url" />

        

          <.field_label>My label</.field_label>

        

          attr :for, :string, default: nil
attr :class, :string, default: nil
attr :rest, :global
slot :inner_block, required: true

        

          <.field_error>My Error</.field_error>

        

          slot :inner_block, required: true