DSCatalyst design system
TenantRexall
Design system/Components/Form field
atom ยท source observed

Form field

Typed labelled input/select contract independent of the current CMS or endpoint.

3consumers0evidence10tokens
Rendered primitiveForm field variants and statesdeterministic source context state extraction
Brand 0 First Name fieldSource-observed newsletter input; filled/error/disabled are required interaction states.
source observed
Emptyfield.input-firstname.emptysource observed
Filledfield.input-firstname.filledagent inferred
Focusfield.input-firstname.focusrequired derived
Validation errorfield.input-firstname.errorrequired derived
Disabledfield.input-firstname.disabledrequired derived
Brand 0 Email Address fieldSource-observed newsletter input; filled/error/disabled are required interaction states.
source observed
Emptyfield.input-emailaddress.emptysource observed
Filledfield.input-emailaddress.filledagent inferred
Focusfield.input-emailaddress.focusrequired derived
Validation errorfield.input-emailaddress.errorrequired derived
Disabledfield.input-emailaddress.disabledrequired derived
Brand 0 Postal Code fieldSource-observed newsletter input; filled/error/disabled are required interaction states.
source observed
Emptyfield.input-postalcode.emptysource observed
Filledfield.input-postalcode.filledagent inferred
Focusfield.input-postalcode.focusrequired derived
Validation errorfield.input-postalcode.errorrequired derived
Disabledfield.input-postalcode.disabledrequired derived
Brand 0 Province selectSource-observed newsletter select; selected/error/disabled are required interaction states.
source observed
Emptyfield.select-province.emptysource observed
Selectedfield.select-province.selectedagent inferred
Focusfield.select-province.focusrequired derived
Validation errorfield.select-province.errorrequired derived
Disabledfield.select-province.disabledrequired derived

Semantic token resolution

Surfacevar(--wl-surface)surfacebackgroundFocus ringvar(--wl-primary)Form fieldatom API

Used by

Newsletter signup formName, email, province, and postal-code inputs.directPrescription transfer formPatient/pharmacy/prescription fields.directPreferred store finderStore query field.inferred

Proposed contract

namelabeltypeplaceholderrequiredoptionserrorhelpText

Token contract

Surfacevar(--wl-surface)Textvar(--wl-ink)Placeholdervar(--wl-muted)Bordervar(--wl-primary-soft)Focus ringvar(--wl-primary)Errorvar(--wl-accent)Radiusvar(--wl-control-radius)Heightvar(--wl-control-height)2 moresemantic slots
  • Newsletter and transfer forms should consume this before backend-specific mapping is introduced.