Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Form examples · Layouts

Inline Form for React

An inline newsletter form with an email input and a Subscribe button on one row, and a visually hidden label.

Framework
UI library

Newsletter sign-ups want the input and the button on one line. The form itself is flex items-start gap-2: the email Field takes the space with flex-1 and Subscribe sits beside it. The FieldLabel is sr-only, so screen readers still announce Email while the placeholder carries the visible hint. A Controller wires the input into React Hook Form and a Zod schema checks the address on submit.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How is the email and button kept on one row?

The form is flex items-start gap-2 inside max-w-md. The email Field has flex-1, and Subscribe is a type="submit" button beside it.

Why is the Email label sr-only?

FieldLabel has className="sr-only", so the input keeps its accessible name, Email, without a visible label. The visible hint is the placeholder Enter your email.

Where does the email error show?

FieldError is inside the Field, under the input. The message is Please enter a valid email address., from z.email().

What value does Subscribe accept?

email must pass z.email(). defaultValues starts it as an empty string, and form.handleSubmit(onSubmit) logs the address only after the check passes.

What type is the input?

The Input sets type="email" and spreads the field from the Controller named email. Its id is inline-form-email, which the hidden label points at.

When does validation run?

useForm doesn't set mode, so the check runs on submit. The row is items-start, so when the message appears under the input the button stays aligned with the field.

All 42 form examples