Input
The Input component in our UI library offers a versatile and customizable input field, designed to seamlessly integrate with your application's UI. It supports various properties, such as variant, rounded, and status, allowing you to tailor its appearance and behavior to suit different use cases. Whether you need a simple text input, a file uploader, or an input with status indicators for validation, this component provides the flexibility to meet your design requirements while maintaining consistency across your project.
Basic Input
1<Input placeholder="Default Input" variant="default" />Input API Reference
Prop | Type | Default |
|---|---|---|
className | string | - |
rounded | string | default |
variant | string | default |
disabled | boolean | false |
status | string | - |
* Required | ||
Prop | Types |
|---|---|
rounded | default none full |
variant | default secondary |
status | success error warning info |
Disabled Input
1<Input variant="default" disabled />File Input
1<Input
2 variant="default"
3 avatar={
4 <Zap
5 className="w-5 h-5"
6 />
7}>
8 Icon Input
9</Input>Input - Rounded Edges
1<Input placeholder="Rounded None" rounded="none" />
2<Input placeholder="Rounded Default" rounded="default" />
3<Input placeholder="Rounded Full" rounded="full" />Input - Status Variants
1<Input
2 placeholder="Default Input"
3 status="success"
4/>
5<Input
6 placeholder="Default Input"
7 status="error"
8/>
9<Input
10 placeholder="Default Input"
11 status="warning"
12/>
13<Input
14 placeholder="Default Input"
15 status="info"
16/>Input - Style Variants
Secondary Input
1<Input variant="default" type="file" />