Forms

End-to-end form integration: Ecto changeset validation, to_form, form primitives, and interactive components with hidden inputs.

Text Inputs with Validation

Using form_field — one component for label, input, description, and error messages. Errors appear after interaction.

Username

Your public display name (2–20 chars).

We'll never share your email.

Bio

Max 160 characters.

Language (required)

No default — required field. Try submitting without selecting.

Framework

Custom Select component with floating dropdown.

Interactive Components in Forms

Checkbox, Switch, Toggle, and ToggleGroup with hidden inputs — proving the full phx-change round-trip.

Email Notifications

Receive email about new features and updates.

Bold Text

Enable bold formatting.

Accept Terms

You agree to our Terms of Service and Privacy Policy.

Text Alignment

Current: left

Font Size (required)

No default — required field. Try submitting without selecting.

Volume

Single-thumb slider. Current: 50

Price Range

Range slider with two thumbs. Current: [20, 80]

Theme (required)

Light

Dark

System

No default — required field. Starts nil to test validation.

Verification Code (required)

Enter exactly 6 digits — try 123456. Partial input shows a validation error.

<.form_field field={@form[:notifications]} label="Email Notifications" type="switch"
  default_checked={@form[:notifications].value == true}
  description="Receive email about new features and updates." />

<.form_field field={@form[:bold]} label="Bold Text" type="toggle"
  default_pressed={@form[:bold].value == true} variant="outline"
  description="Enable bold formatting.">
  <svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8" /></svg>
</.form_field>

<.form_field field={@form[:terms]} label="Accept Terms" type="checkbox"
  description="You agree to our Terms of Service and Privacy Policy." />

<.form_field field={@form[:alignment]} label="Text Alignment" type="toggle_group"
  variant="outline"
  description={"Current: #{@form[:alignment].value || "left"}"}>
  <.toggle_group_item value="left" variant="outline" aria-label="Align left">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="21" x2="3" y1="6" y2="6" /><line x1="15" x2="3" y1="12" y2="12" /><line x1="17" x2="3" y1="18" y2="18" /></svg>
  </.toggle_group_item>
  <.toggle_group_item value="center" variant="outline" aria-label="Align center">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="21" x2="3" y1="6" y2="6" /><line x1="17" x2="7" y1="12" y2="12" /><line x1="19" x2="5" y1="18" y2="18" /></svg>
  </.toggle_group_item>
  <.toggle_group_item value="right" variant="outline" aria-label="Align right">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="21" x2="3" y1="6" y2="6" /><line x1="21" x2="9" y1="12" y2="12" /><line x1="21" x2="7" y1="18" y2="18" /></svg>
  </.toggle_group_item>
</.form_field>

<.form_field field={@form[:font_size]} label="Font Size (required)" type="toggle_group"
  variant="outline"
  description="No default — required field. Try submitting without selecting.">
  <.toggle_group_item value="sm" variant="outline" aria-label="Small">
    <span class="text-xs font-medium">S</span>
  </.toggle_group_item>
  <.toggle_group_item value="md" variant="outline" aria-label="Medium">
    <span class="text-sm font-medium">M</span>
  </.toggle_group_item>
  <.toggle_group_item value="lg" variant="outline" aria-label="Large">
    <span class="text-base font-medium">L</span>
  </.toggle_group_item>
</.form_field>

<.form_field field={@form[:volume]} label="Volume" type="slider"
  default_value={@form[:volume].value || 50}
  description={"Single-thumb slider. Current: #{@form[:volume].value || 50}"} />

<.form_field field={@form[:price_range]} label="Price Range" type="slider"
  default_value={@form[:price_range].value || [20, 80]}
  step={5}
  description={"Range slider with two thumbs. Current: #{inspect(@form[:price_range].value || [20, 80], charlists: :as_lists)}"} />

<.form_field field={@form[:theme]} label="Theme (required)" type="radio_group"
  description="No default — required field. Starts nil to test validation.">
  <div class="flex items-center space-x-2">
    <.radio_group_item value="light" id="theme-1" />
    <.label for="theme-1">Light</.label>
  </div>
  <div class="flex items-center space-x-2">
    <.radio_group_item value="dark" id="theme-2" />
    <.label for="theme-2">Dark</.label>
  </div>
  <div class="flex items-center space-x-2">
    <.radio_group_item value="system" id="theme-3" />
    <.label for="theme-3">System</.label>
  </div>
</.form_field>

<.form_field field={@form[:otp]} label="Verification Code (required)" type="input_otp"
  max_length={6}
  description="Enter exactly 6 digits — try 123456. Partial input shows a validation error." />

Nested Form (inputs_for)

A nested :profile embed using inputs_for — proving our form primitives work at nested depth.

Display Name

Shown publicly on your profile.

Public Profile

Make your profile visible to others.

Preferred Contact (required)

Phone

Don't contact me

Nested field via inputs_for — required, starts nil.

Submit

Submit the form and see the raw params the server receives.

Live State

The %Settings struct after applying the changeset. Updates as you type.

%PhxShadcnDev.Schemas.Settings{
  username: "",
  email: "",
  bio: "",
  notifications: false,
  bold: false,
  alignment: "left",
  font_size: nil,
  theme: nil,
  terms: nil,
  language: nil,
  framework: nil,
  volume: 50,
  price_range: [20, 80],
  otp: nil,
  profile: nil
}