ComponentsForms
Field
Label, control, help text and error, wired together for you.
Theme
Motion
Label, control, help text and error, wired together for you.
Use your work email.
<Field label="Email" description="Use your work email.">
<Input placeholder="you@example.com" />
</Field>The same component at all four levels. Pick the one that fits your project; they share tokens, so they mix.
npm i junco @junco/tailwindimport { Field, Input } from "junco";
<Field label="Email" description="Use your work email." error={errors.email} isRequired>
<Input type="email" />
</Field>Every control picks up its id, label, help text and error from the Field around it. Submit empty to see the error.
Field#labeldescriptionerrorisRequiredisDisabledidclassNames| Prop | Type | Default |
|---|---|---|
labelRendered as a <label> pointing at the control. | ReactNode | – |
descriptionHelp text under the control, linked with aria-describedby. | ReactNode | – |
errorError message. Setting it marks the control invalid and links the message. | ReactNode | – |
isRequiredShows a marker and sets required on the control. | boolean | false |
isDisabledDisables the control and dims the label. | boolean | false |
idId for the control. Generated when omitted. | string | – |
classNamesSlot overrides. | { root?, label?, description?, error? } | – |
useFieldControl#For your own controls: pass your props through it to pick up the Field wiring.
props| Prop | Type | Default |
|---|---|---|
propsProps on the control win over the Field's. | { id?, disabled?, required?, aria-describedby?, aria-invalid? } | – |