The Eloquent · Bộ giao diện80 mục
Mục lục tham khảo

Khối

Classifieds form

Block: the brief form (name, company, email, brief, four-way project size) with an error summary, inline success and error messages and an onSubmit prop; no network call.

Nội dung tham khảo viết bằng tiếng Anh; mục “Vietnamese” có ví dụ tiếng Việt.

Xem trước

Used only to reply to this brief.

A few sentences on the goal, the people who will use it and the timing.

Project size

Install

bash

npx shadcn add @eloquent/classifieds-form

This is a block: it installs to components/blocks/classifieds-form.tsx and adds button, field, form, input, label, radio-group and textarea, plus react-hook-form.

Usage

tsx

import { ClassifiedsForm } from "@/components/blocks/classifieds-form";

<ClassifiedsForm
  copy={copy}
  onSubmit={async (values) => {
    // values: { name, company, email, brief, size }
    await sendBrief(values); // your code; reject to show the error message
  }}
/>

copy carries every string, including the four size labels (sizes) and the error summary title (summary(count), a function, so build copy in a client module). The component never calls the network: your onSubmit does. Return normally for the success message, throw or reject for the error message.

States

Failed validation

Used only to reply to this brief.

A few sentences on the goal, the people who will use it and the timing.

Project size

Sent

Used only to reply to this brief.

A few sentences on the goal, the people who will use it and the timing.

Project size

Brief sent. A reply will follow by email.

Send failed

Used only to reply to this brief.

A few sentences on the goal, the people who will use it and the timing.

Project size
StateTreatment
Failed validationSummary at the top (2px ink left rule, ink ! icon, one entry per error); each invalid field gets a 2px ink left rule, an ink ! icon and a message; the first invalid field takes focus
SendingThe button reads "Sending…" and stays focusable; a second send is blocked
SentAn ink check icon and a message in a role="status" line; the form is cleared
Send failedA 2px ink left rule, an ink ! icon and a message in a role="alert" line; the values stay

Keyboard

KeyAction
Tab / Shift+TabSummary entries (after a failed submit), name, company, email, brief, the size group (one stop), submit
Arrow keysMove through the four project sizes and select
EnterIn a text field, sends the form; on a summary entry, focuses that field
SpaceActivates the focused button or selects the focused size

Vietnamese

Địa chỉ này chỉ dùng để phản hồi bản mô tả.

Vài câu về mục tiêu, người dùng và thời hạn.

Quy mô dự án

Ink adaptation

Brand block with no upstream. Fields are newspaper form lines, not boxes. The four project sizes are scale-of-work labels, never prices. Errors and success are shown by ink rules, icons and words, never colour. The email field is not type="email" so the form's own summary and messages show instead of the browser's bubble; inputMode="email" keeps the mobile keyboard.