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.

Your public display name (2–20 chars).

We'll never share your email.

Max 160 characters.

No default — required field. Try submitting without selecting.

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.

Receive email about new features and updates.

Enable bold formatting.

You agree to our Terms of Service and Privacy Policy.

Current: left

No default — required field. Try submitting without selecting.

Single-thumb slider. Current: 50

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

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

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.

Shown publicly on your profile.

Make your profile visible to others.

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
}