components / field
field.
label, control, hint and error as one accessible unit. the render-prop form hands the control its id, aria-describedby, aria-invalid and required already computed, so a field is announced correctly without matching ids by hand. an error replaces the hint rather than stacking under it.
that doesn't look like an email address.
installation
bunx @justin06lee/chrome@latest add fieldprops
| name | type | default | description |
|---|---|---|---|
| label * | ReactNode | - | label text. |
| children * | ReactNode | ((props: FieldControlProps) => ReactNode) | - | the control. pass a function to receive { id, aria-describedby, aria-invalid, required } and spread it onto the input. |
| htmlFor | string | - | explicit control id; one is generated when omitted. |
| hint | ReactNode | - | muted line under the control. hidden while an error is showing. |
| error | ReactNode | - | error text. its presence is what marks the field invalid. |
| required | boolean | false | adds a marker to the label and sets required on the control. |
| optional | boolean | false | renders a muted "optional" tag instead. ignored when required. |
| labelHidden | boolean | false | keeps the label for screen readers only. |
| action | ReactNode | - | trailing slot on the label row — a counter, a "forgot?" link. |
| className | string | - |