Tarva BXD · LumosIndex › Components › Text inputs · 1
1920 × 1080 · Landscape
Index › Components › Text inputs · 1
1 of 2 · Text inputs
Components · Text inputs · 1
Where words land.
The seven fields that take a person's words — text, long-form, numbers, phone, codes, and the label-and-helper scaffolding that wraps them. State lives in the border and the message; accent rests on the focus ring alone.
Inputvariant × data-size
Default · prefix + clearable
Sage rooms, downtown
Focus · accent ring
Avery Lindqvist
Variants
default · error · warning; sizes via data-size sm/md/lg. Optional prefix · suffix · helper · clearable slots. Accent is the focus ring only.Input · stateserror · warning · disabled
Error · aria-invalid
avery@
Enter a valid email address
Warning · advisory
(555) 01
error sets the destructive frame + aria-invalid; warning is advisory — amber frame paired with an icon, never color alone (WCAG 1.4.1).Textareadata-size · min-h 80
Default · multi-line
Notes for the practitioner before the session begins…
Multi-line field, no CVA variants. Sizes via
data-size sm/md/lg (horizontal padding only) — height stays min-h 80px.Number Inputsize · error · warning
Default · steppers + suffix
60min
At min · ▼ disabled · warning
0
Composes
Input with trailing ▼/▲ steppers. min/max/step clamp the value and disable a stepper at the bound. Tiers error · warning mirror Input.Phone Inputcountry · E.164
Default · US · as-you-type
+1
(number withheld)
Country selector + a
@tarva/ui Input; formats as you type and emits E.164. Props defaultCountry · international · error · disabled.Input PIN codeslot · group · separator
maxLength 6 · slot 4 active
482
··
PIN-code field built from the PIN-code input component and its group, slot and separator parts. The active slot takes the accent ring;
onComplete fires when filled.Fieldlabel · required · helper · error
Full name*
Avery Lindqvist
As it appears on your ID
Email*
avery@
Enter a valid email address
Composition primitive: wraps one input-shaped child with a
Label + helper, wiring htmlFor, aria-describedby/-invalid/-required. Props label · required · helper · error · disabled · readOnly. error overrides helper.LabelhtmlFor · Radix Root
Phone number— text-sm · font-medium
Date of birth*— required marker
Insurance ID— peer-disabled · opacity-70
Radix
Label.Root at text-sm font-medium. Associates to its control via htmlFor; dims to opacity-70 when its peer is disabled. Drives the label inside Field.
8.5 × 11 · Portrait