Input groups

Text inputs with leading/trailing icons, inline currency or unit addons, and bordered prefix addons.

Preview

Optional
https://
https://
$
USD

Enter the amount in US dollars.

Not available. Please choose another.

React preview

LiveView (HEEx) 

alias DesignSystem.UI.InputGroups

<InputGroups.input_group
  id="email"
  name="email"
  type="email"
  label="Email"
  leading_icon="hero-envelope-mini"
/>

<InputGroups.input_group
  id="website"
  name="website"
  label="Company website"
  leading_addon="https://"
/>

<InputGroups.input_group
  id="price"
  name="price"
  label="Price"
  inline_leading="$"
  inline_trailing="USD"
  help="Amount in US dollars."
/>

<InputGroups.input_group
  id="username"
  name="username"
  label="Username"
  value="adamwathan"
  error="Not available."
/>

React (JSX) 

import { EnvelopeIcon } from "@heroicons/react/20/solid"
import { InputGroup } from "../ui/index.mjs"

<InputGroup
  id="email"
  name="email"
  type="email"
  label="Email"
  LeadingIcon={EnvelopeIcon}
/>

<InputGroup
  id="website"
  name="website"
  label="Company website"
  leadingAddon="https://"
/>

<InputGroup
  id="price"
  name="price"
  label="Price"
  inlineLeading="$"
  inlineTrailing="USD"
  help="Amount in US dollars."
/>

<InputGroup
  id="username"
  name="username"
  label="Username"
  defaultValue="adamwathan"
  error="Not available."
/>