Anatomy

    <.anatomy_all_fields id_prefix="native-input-all" input_class="native-input" />

  

    <div class="flex flex-col gap-space-lg">
  <.native_input type="text" name="user[name]" class="native-input">
    <:label>Text</:label>
    <:icon><.heroicon name="hero-pencil-square" class="icon" /></:icon>
  </.native_input>
  <.native_input type="text" name="user[name]" class="native-input">
    <:label>Text</:label>
  </.native_input>
  <.native_input type="textarea" name="user[bio]" class="native-input">
    <:label>Bio</:label>
  </.native_input>
  <.native_input type="email" name="user[email]" class="native-input">
    <:label>Email</:label>
    <:icon><.heroicon name="hero-envelope" class="icon" /></:icon>
  </.native_input>
  <.native_input type="email" name="user[email]" class="native-input">
    <:label>Email</:label>
  </.native_input>
  <.native_input type="url" name="user[website]" class="native-input">
    <:label>Website</:label>
    <:icon><.heroicon name="hero-link" class="icon" /></:icon>
  </.native_input>
  <.native_input type="url" name="user[website]" class="native-input">
    <:label>Website</:label>
  </.native_input>
  <.native_input type="tel" name="user[phone]" class="native-input">
    <:label>Phone</:label>
    <:icon><.heroicon name="hero-phone" class="icon" /></:icon>
  </.native_input>
  <.native_input type="tel" name="user[phone]" class="native-input">
    <:label>Phone</:label>
  </.native_input>
  <.native_input type="search" name="q" class="native-input" placeholder="Search">
    <:label>Search</:label>
    <:icon><.heroicon name="hero-magnifying-glass" class="icon" /></:icon>
  </.native_input>
  <.native_input type="search" name="q" class="native-input" placeholder="Search">
    <:label>Search</:label>
  </.native_input>
  <.native_input type="password" name="user[password]" class="native-input">
    <:label>Password</:label>
    <:icon><.heroicon name="hero-lock-closed" class="icon" /></:icon>
  </.native_input>
  <.native_input type="password" name="user[password]" class="native-input">
    <:label>Password</:label>
  </.native_input>
  <.native_input
    type="number"
    name="user[count]"
    value="42"
    min="0"
    max="100"
    step="1"
    class="native-input"
  >
    <:label>Number</:label>
  </.native_input>
</div>

  

    <div class="flex flex-col gap-space-lg">
  <.native_input type="date" name="user[date]" class="native-input">
    <:label>Date</:label>
  </.native_input>
  <.native_input type="datetime-local" name="user[datetime]" class="native-input">
    <:label>Date and time</:label>
  </.native_input>
  <.native_input type="time" name="user[time]" class="native-input">
    <:label>Time</:label>
  </.native_input>
  <.native_input type="month" name="user[month]" class="native-input">
    <:label>Month</:label>
  </.native_input>
  <.native_input type="week" name="user[week]" class="native-input">
    <:label>Week</:label>
  </.native_input>
</div>

  

    <div class="flex flex-col gap-space-lg">
  <.native_input
    type="select"
    multiple
    name="user[tags][]"
    options={[
      {"Elixir", "elixir"},
      {"Phoenix", "phoenix"},
      {"LiveView", "liveview"},
      {"Ecto", "ecto"},
      {"OTP", "otp"}
    ]}
    prompt="Choose tags..."
    class="native-input"
  >
    <:label>Tags</:label>
  </.native_input>
</div>

  

    <.native_input type="checkbox" name="user[agree]" class="native-input">
  <:label>I agree</:label>
</.native_input>
<.native_input type="select" name="user[role]" options={["Admin": "admin", "User": "user"]} prompt="Choose role" class="native-input">
  <:label>Role</:label>
</.native_input>
<.native_input type="radio" name="user[size]" options={["Small": "s", "Medium": "m", "Large": "l"]} value="m" class="native-input">
  <:label>Size</:label>
</.native_input>