Form inputs

Text input, native select, checkbox, and on/off toggle. Presentational only — pair with Phoenix.HTML.FormField at the call site.

Preview

Location

I agree to the terms

You can revoke at any time.

Email notifications Get notified about activity.

React preview

LiveView (HEEx)

alias DesignSystem.UI.FormInputs

<FormInputs.text id="email" name="email" type="email" label="Email" />

<FormInputs.select
  id="country"
  name="country"
  label="Country"
  value="us"
  options={[{"United States", "us"}, {"Canada", "ca"}]}
/>

<FormInputs.checkbox
  id="tos"
  name="tos"
  label="I agree to the terms"
/>

<FormInputs.toggle
  id="notifs"
  name="notifs"
  label="Email notifications"
  checked
/>

React (JSX)

import { Checkbox, Select, TextInput, Toggle } from "../ui/index.mjs"

<TextInput id="email" name="email" type="email" label="Email" />

<Select
  id="country"
  label="Country"
  value={country}
  onChange={(e) => setCountry(e.target.value)}
  options={[
    { label: "United States", value: "us" },
    { label: "Canada", value: "ca" },
  ]}
/>

<Checkbox id="tos" label="I agree to the terms" />

<Toggle
  label="Email notifications"
  checked={on}
  onChange={setOn}
/>