Inline add
An inline add is one labelled input and its button on a single row, for adding an item to a list: a domain, a page, a key label. Enter submits.
Add to a list
Use *.acme.com to allow every subdomain.
Show code
<KbInlineAdd label="Allowed domain" placeholder="acme.com" value={v} onChange={setV} onSubmit={add} submitLabel="Add domain" hint="Use *.acme.com for every subdomain." />When to use
- Use it under a list that the person extends. Show the list above and keep the input here.
- Label the button verb and noun, with no plus sign: Add domain.
- Keep it secondary unless adding is the one main action of the view.
Use *.acme.com to allow every subdomain.
A separate Add button far from the input
Import
import { KbInlineAdd } from "@/components/ui/KbInlineAdd";
<KbInlineAdd label="Allowed domain" value={v} onChange={setV} onSubmit={add} submitLabel="Add domain" />Props
| Prop | Type | Default | What it does |
|---|---|---|---|
label | string | None | The input's accessible name. |
value / onChange | string / (next) => void | None | Controlled value. |
onSubmit | () => void | None | Called by the button and by Enter. |
submitLabel | string | None | Verb and noun. |
hint | ReactNode | None | Help or a validation message under the row. |
variant | "primary" | "secondary" | "secondary" | Primary only for the one main action. |
Keyboard and screen readers
- The input is named with aria-label; a placeholder is not a label.
- The button is disabled while the input is empty.
- Wraps onto two lines under 640px with the input first.