Account field
Account profile, address book, and account access forms.
- Component
- AccountField
- Classes
- Label + shadcn Input + optional error text
Sample
Design System
Internal reference for SENTIENT Custom Leather UI patterns, typography, and components.
Forms
The leather site uses two field stacks: shadcn Label + Input for account and checkout flows, and native inputs with React Hook Form on the public contact form. Configurator specification controls use custom selection components.
Patterns
| Pattern | Value | Used for |
|---|---|---|
| Validation | Zod at the edge | Inquiry uses React Hook Form + zodResolver. Account, checkout, and address forms validate with Zod schemas before API submission. |
| Labels | text-sm font-medium | All labeled fields expose htmlFor/id pairs. Required fields show a destructive asterisk on account and checkout forms. |
| Errors | text-xs text-destructive | Field errors use role="alert", aria-invalid on inputs, and aria-describedby pointing to the error id. |
| Captcha | InvisibleTurnstile | Contact inquiry, account access, and checkout sign-in forms gate submission behind Cloudflare Turnstile when needed. |
| Layout | space-y-4 / space-y-6, sm:grid-cols-2 | Multi-field forms use vertical rhythm; name and contact rows split into two columns from the sm breakpoint. |
| Section header | LeatherSectionHeader + inline help link | Texture, sheen, softness, and thickness controls share one heading component with an optional step number and an inline text link that opens an option comparison dialog. |
| Specification selector | role="radiogroup" of option cards | Texture and sheen render an image + label + description card; softness renders label + description only. All three share the same selected-state treatment. |
| Field surface | White fill (site-wide) | All text inputs, selects, and textareas render on a white surface. Applied via a [data-leather-site] rule in globals.css so the shared shadcn Input/Select (bg-gray-50 elsewhere) and native fields match without forking primitives or affecting other projects. |
Field primitives
Checkout text field
Quote/checkout contact and shipping forms.
- Component
- QuoteTextField
- Classes
- Label + shadcn Input + required indicator + phone formatting support
Sample
Inquiry native input
Public contact form on /contact.
- Component
- LeatherInquiryForm FormField
- Classes
- Native input/textarea with rounded-md border, focus ring, and destructive border on error
Sample
State select
US state dropdown on account addresses and checkout shipping.
- Component
- StateField / QuoteStateField
- Classes
- Native select styled to match shadcn Input height and focus ring
Sample
Checkbox
Boolean fields such as the default-address and tax-exempt toggles. Base component for new forms; native checkboxes are being retired.
- Component
- Checkbox (@/components/ui/checkbox)
- Classes
- shadcn Checkbox: size-4 rounded border-input shadow-xs, primary fill when checked, 3px focus ring
Sample
Radio group
Single-choice option lists where each choice is a short label (e.g. shipping speed). Distinct from the visual Specification selector below, which uses thumbnail cards.
- Component
- RadioGroup / RadioGroupItem (@/components/ui/radio-group)
- Classes
- shadcn RadioGroup: size-4 rounded-full border-input shadow-xs, primary dot when selected, 3px focus ring
Sample
Select (menu)
Standard dropdown for future menu-style choices. The US state field currently uses a styled native select; new selects should use this component.
- Component
- Select (@/components/ui/select)
- Classes
- shadcn Select trigger: rounded-md border-input shadow-xs with chevron; popover menu with checkmark indicator
Sample
Toggle
Two-state on/off control for view or unit switches. Base component for future settings-style toggles.
- Component
- Toggle (@/components/ui/toggle)
- Classes
- shadcn Toggle (variant="outline"): border-input bg-transparent shadow-xs, accent fill when pressed
Sample
Number input
Configurator production quantity in hides and square feet.
- Component
- LeatherQuantityInput
- Classes
- shadcn Input type="number" with inline label row and minimum validation
Sample
File upload
Tax exemption certificate upload during checkout.
- Component
- LeatherTaxExemptionControl
- Classes
- Hidden file input with drag/drop zone, PDF/image validation, and document list
Sample
PDF, JPG, PNG, or DOC up to 10 MB
Specification selector
Configurator texture, sheen, and softness controls.
- Component
- LeatherTextureSelect, LeatherSheenSlider, LeatherSoftnessSelect
- Classes
- role="radiogroup" of option cards; selected = border-foreground ring-1 ring-foreground bg-gradient-to-b from-muted/20 to-muted/50
Sample
Validation & error states
Fields flip to an invalid state the same way everywhere: aria-invalid on the control drives the shadcn destructive treatment, and a small destructive message renders directly below, wired to the input via aria-describedby.
- Invalid control
- Setting aria-invalid triggers border-destructive plus a ring-destructive/20 focus ring on the shadcn Input and native selects — no extra classes required. Native contact inputs add border-destructive explicitly.
- Error message
- text-xs text-destructive rendered right below the field with its own id, linked through aria-describedby. Contact form messages also carry role="alert" so they are announced live.
- Required marker
- Required fields append an aria-hidden destructive asterisk after the label, with an sr-only "required" suffix on checkout fields.
- Validation timing
- Zod / React Hook Form validate on submit; the invalid state and message clear as soon as the field becomes valid.
Text field
AccountField with an error passed in. aria-invalid draws the destructive border and ring; the message links via aria-describedby.
Enter a valid email address.
Checkout field
QuoteTextField error state, showing the required asterisk beside the label and the destructive message below.
Postal code is required.
State select
The native select inherits the same destructive border and message treatment through aria-invalid.
Select your state.
Native inquiry input
Contact form fields use a native input with border-destructive and a role=alert message so it is announced live.
Project details are required.
Forms on the site
Contact inquiry
LeatherInquiryForm
/contact
Validation: React Hook Form + leatherInquirySchema
- First name
- Last name
- Phone
- Company
- Project details (textarea)
- Turnstile
Account sign-in / create
LeatherAccountAccessForm
/account
Validation: Client required fields + auth API
- First name / last name (create only)
- Phone / company (create only)
- 6-digit verification code
- Turnstile
Checkout sign-in modal
LeatherSignInModal
/quote
Validation: Client required fields + auth API
- 6-digit verification code
- Turnstile
Account profile
ProfileSection
/account
Validation: Zod account profile schema
- First name
- Last name
- Phone
- Company
Shipping addresses
AddressForm
/account
Validation: Zod shipping address schema
- Address label
- First name
- Last name
- Company
- Address line 1
- Address line 2
- City
- State
- Postal code
- Default address checkbox
Checkout contact & shipping
PaymentStep
/quote
Validation: Zod billing/shipping schema
- First name
- Last name
- Phone
- Company
- Address line 1
- Address line 2
- City
- State
- Postal code
Tax exemption
LeatherTaxExemptionControl
/quote
Validation: File type and size checks
- Tax exempt checkbox
- Certificate upload (up to 5 files)
Configurator quantity
LeatherQuantityInput
/configurator
Validation: Minimum production hides
- Cow hides (number)
- Square feet (derived readout)
Configurator color
LeatherColorPicker
/configurator
Validation: Color selection required before quote
- Color library grid
- Hex color picker
- Pantone code input
- Color match sub-options
Configurator specification selectors
LeatherTextureSelect, LeatherSoftnessSelect, LeatherThicknessSelect
/configurator
Validation: Required before quote
- Texture
- Sheen
- Softness
- Thickness