Input
A flexible and fully customizable `Input` component for forms and UI fields. Supports different visual **variants**, **colors**, **sizes**, **rounded corners**, labels, and layout customizations.
Features
- 4 visual input variants
- 6 color options
- 5 sizes
- Adjustable corner radius
- Support for labels and label placements
- Full width layout option
- Disabled state support
Variants
Color Options
Customize your input field to match your UI theme.
Rounded Corners
Choose border-radius from small, medium, or large to fit different layouts.
Labels & Label Placement
Controlled Example
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "flat" | "faded" | "bordered" | "underlined" | "flat" | Visual style of the input |
color | "default" | "primary" | "secondary" | "danger" | "success" | "warning" | "default" | Input color |
size | "base" | "sm" | "md" | "lg" | "xl" | "base" | Size of the input |
rounded | "sm" | "md" | "lg" | "xl" | "full" | "md" | Border radius |
placeholder | string | "" | Placeholder text |
disabled | boolean | false | Disables the input |
fullWidth | boolean | false | Makes the input stretch to 100% width |
label | string | "" | Label for the input field |
labelPlacement | "top" | "left" | "top" | Position of the label relative to the input |
Checkbox
The `Button` component is a versatile UI element used to trigger actions or navigate users. It supports various visual styles, sizes, and interaction enhancements.
Modal
A customizable popup or overlay for displaying important content, forms, or dialogs without leaving the current page—supports sizes, colors, shadows, and animations.