Input

1import React from 'react'
2
3import { Input } from '@/components/ui/input'
4
5export function InputDemo() {
6    return (
7        <div className="w-60 sm:w-80">
8            <Input type="text" placeholder="Search here..." />
9        </div>
10    )
11}
12

1import React from 'react'
2import { Mail, UserRound } from 'lucide-react'
3
4import { Input } from '@/components/ui/input'
5
6export function InputIcon() {
7    return (
8        <div className="flex w-60 flex-col gap-4 sm:w-80">
9            <Input
10                type="text"
11                placeholder="Username"
12                iconLeft={<UserRound className="size-5" />}
13            />
14            <Input
15                type="email"
16                placeholder="Email"
17                iconRight={<Mail className="size-5" />}
18            />
19        </div>
20    )
21}
22

1import { Input } from '@/components/ui/input'
2import { Label } from '@/components/ui/label'
3
4export function InputWithLabel() {
5    return (
6        <div className="grid w-60 items-center gap-2.5 sm:w-80">
7            <Label htmlFor="email" className="gap-0.5">
8                Email<span className="text-secondary">*</span>
9            </Label>
10            <Input type="email" id="email" placeholder="Email" />
11        </div>
12    )
13}
14

1import { Input } from '@/components/ui/input'
2import { Label } from '@/components/ui/label'
3
4export function InputFile() {
5    return (
6        <div className="grid w-60 items-center gap-2.5 sm:w-80">
7            <Label htmlFor="picture">Upload Picture</Label>
8            <Input type="file" id="picture" className="file:pr-2" />
9        </div>
10    )
11}
12

1import React from 'react'
2import { UserRound } from 'lucide-react'
3
4import { Input } from '@/components/ui/input'
5
6export function InputPassword() {
7    return (
8        <div className="flex w-60 flex-col gap-4 sm:w-80">
9            <Input
10                type="text"
11                placeholder="Username"
12                iconRight={<UserRound className="size-5" />}
13            />
14            <Input type="password" placeholder="Password" />
15        </div>
16    )
17}
18

1import { Copy, Link } from 'lucide-react'
2
3import { Button } from '@/components/ui/button'
4import { Input } from '@/components/ui/input'
5import { Label } from '@/components/ui/label'
6
7export function InputWithButton() {
8    return (
9        <div className="grid w-60 items-center gap-2.5 sm:w-80">
10            <Label htmlFor="link">Share Link</Label>
11            <div className="relative">
12                <Input
13                    type="email"
14                    id="link"
15                    placeholder="www.sbtheme.com"
16                    iconLeft={<Link className="size-4.5" />}
17                    className="pr-11"
18                />
19                <Button
20                    type="button"
21                    className="absolute inset-y-0 right-0 h-auto rounded-l-none"
22                    size={'icon'}
23                >
24                    <Copy className="size-4.5" />
25                </Button>
26            </div>
27        </div>
28    )
29}
30