Input
A single-line text field: a well with the control edge as an inset ring, and the focus wake.
<Input aria-label="Domain" placeholder="robin.sproutboat.app" />Props
Installation
npx shadcn@latest add https://sproutboat.com/ikada/r/input.jsonThe CLI writes components/ikada/input.tsx and merges the ikada theme into your CSS. Or take it from the package: import { Input } from "@sproutboat/ikada";
Usage
import { Input } from "@/components/ikada/input";
<Input aria-label="Domain" placeholder="robin.sproutboat.app" />Examples
<Input aria-label="Domain" placeholder="robin.sproutboat.app" /><Input aria-label="Deploy ID" mono defaultValue="dpl_8f3a91c2" /><Input aria-label="Domain" invalid defaultValue="robin sproutboat" /><Input aria-label="Region" readOnly defaultValue="eu-west" /><Input aria-label="Region" disabled defaultValue="eu-west" />Props
| Prop | Type | Description |
|---|---|---|
| className | string | Classes merged onto the root element, after ikada's own. |
| invalid | boolean | Marks the field invalid: danger ring and aria-invalid. Prefer the Field error. |
| mono | boolean | Monospace face for ids, keys and hashes. |
| style | CSSProperties | ((state: InputState) => CSSProperties) | Style applied to the element, or a function that returns a style object based on the component's state. |
| render | ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, InputState> | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
Also takes every prop of Omit<ComponentProps<typeof BaseInput>, "className">.
Source: src/components/input.tsx