Input

A flexible input component that supports all native HTML input attributes, offering a consistent style for text fields, file inputs, and fully customizable form blocks.

Input text

pnpm dlx hybrid-astro-ui@latest add input

npx hybrid-astro-ui@latest add input

yarn dlx hybrid-astro-ui@latest add input

bunx hybrid-astro-ui@latest add input

---
import { Input } from "@/src/components/hybrid-astro-ui/input"
---
<div class="w-full max-w-75">
    <Input placeholder="Username" />
</div>

Input file

---
import { Input } from "@/src/components/hybrid-astro-ui/input"
---
<div class="w-full max-w-75">
     <Input type="file"/>
</div>

Input + Button + Card

---
import { Input } from "@/src/components/hybrid-astro-ui/input"
import {
    Card, 
    CardHeader, 
    CardDescription,
    CardTitle, 
    CardContent,
    CardFooter
} from "@/src/components/hybrid-astro-ui/card"
---
<Card class="w-full max-w-90 ">
    <CardHeader class="border-b">
        <CardTitle>Login</CardTitle>
        <CardDescription>
            Access your account by entering your credentials below.
        </CardDescription>
    </CardHeader>
    <CardContent>
        <form class="flex flex-col gap-3">
            <Input placeholder="username" required/>
            <Input type="email" placeholder="email" required/>
            <Button aria-label="Submit login form" class="w-full mt-3">Submit</Button>
        </form>
    </CardContent >
    <CardFooter class="flex items-center gap-2 border-t">
        <p class="text-[0.9rem]!">Forgot your password?</p> 
        <a href="#" class="text-[0.9rem]!">Reset it here.</a>
    </CardFooter>
</Card>

Input disabled

---
import { Input } from "@/src/components/hybrid-astro-ui/input"
---
<div class="w-full max-w-75">
    <Input 
        disabled 
        placeholder="Username" 
        value="example value" />
</div>