The Input component is a customizable and accessible input field built using class-variance-authority (cva) and Tailwind CSS. It supports multiple variants, sizes, and themes to match different design needs.
import { Input } from "mogora-ui";
export default function InputDemo() {
return (
<div>
<Input placeholder="Username" variant={"bordered"} theme={"primary"} className="w-sm" />
</div>
)
}
import { Input, Label } from "mogora-ui";
export default function LabelFloating() {
return (
<div>
// Bordered Variant
<div className="relative flex flex-col gap-2">
<Input theme={"primary"} id="username" name="username" variant={"bordered"} placeholder=" " className="peer" />
<Label
htmlFor="username" className="float-[default]">
Username
</Label>
</div>
// Underline Variant
<div className="relative flex flex-col gap-2">
<Input theme={"primary"} id="email" name="email" variant={"underline"} placeholder=" " className="peer" />
<Label htmlFor="email" className="float-[underline]">
Email
</Label>
</div>
</div>
)
}
| Prop | Type | Description |
|---|---|---|
| variant | "bordered" | "underline" | Defines the style of the input field. |
| size | "small" | "normal" | "large" | Sets the size of the input field. |
| theme | "primary" | "secondary" | "danger" | "warning" | "success" | "info" | "accent" | Specifies the focus color theme of the input. |
| className | string | Additional custom classes for styling. |
| ...props | InputHTMLAttributes<HTMLInputElement> | Inherits all standard HTML input attributes. |
The Checkbox component provides an accessible and flexible way to include styled checkboxes in your React application.