Field
Updated
Field gives a control of your own the built-in controls' label, hint and error: the label in pixel caps above it, the hint and error under it. It sets the control's id (keeping one it has), aria-describedby and aria-invalid, as Input does. Like the charts, it takes your theme's ink and paper, light or dark, and needs no Tailwind.
Example
We POST each export here.
Use an https:// URL.
0 to 100%.
import "@/components/dithercharts/controls.css"
import { Field } from "@/components/dithercharts/field"
<Field label="Webhook URL" hint="We POST each export here." error={errors.url}>
<input type="url" name="url" />
</Field>
// Any one control: it gets the id, aria-describedby and aria-invalid.
<Field label="Owner" hint="Who gets the alerts.">
<MyUserPicker />
</Field>Install
Controls install with DitherCharts Pro. See Installation to log in, then import controls.css once, e.g. in your root layout.
npx dithercharts add field
Props
It renders a native element, so every other attribute that element takes passes through.
| Prop | Type | Default | Description |
|---|---|---|---|
| labelrequired | Type ReactNode | Default – | The caption above the control. Its for points at the control, so a native input, select, textarea or button takes it as its name. |
| childrenrequired | Type ReactElement<ControlProps> | Default – | One control of your own, e.g. an input or a third-party picker. It gets an id (unless it has one), aria-describedby and aria-invalid. |
| className | Type string | Default – | |
| hint | Type ReactNode | Default – | Help text under the field, read after its label. |
| error | Type ReactNode | Default – | An error under the field; it also marks the field invalid. |