Input Component
The Input component is a flexible text input field that can be customized for various use cases.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | undefined | Label text for the input |
| size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | Sets the size of the input |
| variant | "primary" | "secondary" | "success" | "warning" | "error" | "ghost" | "primary" | Sets the color variant of the input |
| type | string | "text" | Sets the type of the input (e.g., 'text', 'password', 'email') |
| required | boolean | false | Whether the input is required |
| wrapperClass | string | "" | Additional CSS classes for the wrapper element |
| labelClass | string | "" | Additional CSS classes for the label element |
| labelTextClass | string | "" | Additional CSS classes for the label text |
| sx | React.CSSProperties | {} | Custom styles to be applied to the input wrapper |
Usage
import { Input } from 'knoxui-react';
<Input
label="Username"
placeholder="Enter your username"
size="md"
variant="primary"
/>