Installation
npm install @kuzenbo/core @kuzenbo/theme
Usage
import { Input } from "@kuzenbo/core";
function App() {
return (
<Input
name="workspaceName"
placeholder="Acme Security Platform"
/>
);
}
Examples
Inputs support all native HTML input types.
import { Input } from "@kuzenbo/core";
function TypesExample() {
return (
<div className="grid gap-3">
<Input
name="workspaceName"
placeholder="Acme Security Platform"
type="text"
/>
<Input
autoComplete="email"
name="billingContactEmail"
placeholder="[email protected]"
type="email"
/>
<Input
autoComplete="current-password"
name="adminPassword"
placeholder="Enter admin override password"
type="password"
/>
<Input
aria-label="Attach signed master service agreement"
name="signedAgreement"
type="file"
/>
</div>
);
}
Sizes
Inputs are available in five size variants.
import { Input } from "@kuzenbo/core";
function SizesExample() {
return (
<div className="grid gap-2">
<Input size="xs" placeholder="XS project code" />
<Input size="sm" placeholder="SM project code" />
<Input size="md" placeholder="MD project code" />
<Input size="lg" placeholder="LG project code" />
<Input size="xl" placeholder="XL project code" />
</div>
);
}
With Default Value
Set initial values using defaultValue or controlled with value.
import { Input } from "@kuzenbo/core";
function DefaultValueExample() {
return (
<Input
defaultValue="PO-2026-0042"
name="purchaseOrderCode"
/>
);
}
Disabled
Disabled inputs are non-interactive and visually muted.
import { Input } from "@kuzenbo/core";
function DisabledExample() {
return (
<Input
disabled
name="workspaceSlug"
readOnly
value="acme-enterprise"
/>
);
}
import { Input } from "@kuzenbo/core";
import { InputGroup } from "@kuzenbo/core";
function InputGroupExample() {
return (
<InputGroup size="xl">
<InputGroup.Input placeholder="Workspace legal name" />
</InputGroup>
);
}
Props
Input extends all native HTML input props.
Size variant of the input.Options: "xs" | "sm" | "md" | "lg" | "xl"
The type of input field.Supports all native HTML input types: "text" | "email" | "password" | "number" | "search" | "tel" | "url" | "file" | etc.
Placeholder text displayed when the input is empty.
When true, disables the input and makes it non-interactive.
When true, makes the input read-only but still focusable.
Controlled value for the input.
Initial value for uncontrolled usage.
The native HTML size attribute (number of visible characters).
Additional CSS classes to apply to the input.
TypeScript
import type { InputProps } from "@kuzenbo/core";
const CustomInput = (props: InputProps) => {
return <Input {...props} />;
};
Accessibility
- Input uses semantic
<input> element
- Supports all ARIA attributes for enhanced accessibility
- Invalid state indicated with
aria-invalid attribute
- Works with native form validation
- Supports
autoComplete for browser autofill