Input group
Updated
InputGroup is a text input with addons in the same ink frame: units, prefixes or a small button, each split off by a 2px rule. The focus ring goes around the whole row. Like the charts, it takes your theme's ink and paper, light or dark, and needs no Tailwind.
Example
$USD
https://
Enter a domain
import "@/components/dithercharts/controls.css"
import { Button } from "@/components/dithercharts/button"
import { InputGroup } from "@/components/dithercharts/input-group"
<InputGroup label="Budget" start="$" end="USD" inputMode="decimal" />
<InputGroup label="Website" start="https://" placeholder="example.com" />
<InputGroup
label="Share link"
readOnly
defaultValue="dithercharts.com/s/8f2k"
end={<Button size="sm" variant="outline">Copy</Button>}
/>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 input-group
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 field, and its accessible name. |
| start | Type ReactNode | Default – | An addon before the input, e.g. "$", "https://", an icon or a small Button. |
| end | Type ReactNode | Default – | An addon after the input, e.g. "kg", "USD" or a small Button. |
| 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. |