Get Started

Components

accordion alert avatar breadcrumb button checkbox dropdown input label modal pagination radio select sheet skeleton switch table textarea toast

Input

Displays a form input field or a component that looks like an input field.

code

Expend code


  <Input type="text" placeholder="placeholder" />


  <Input type="text" placeholder="placeholder" />

#With Label

code

Expend code


  <div className="grid w-full max-w-sm items-center gap-1.5">
      <Label htmlFor="email">Email</Label>
      <Input type="email" id="email" placeholder="Email" />
  </div>


  <div className="grid w-full max-w-sm items-center gap-1.5">
      <Label htmlFor="email">Email</Label>
      <Input type="email" id="email" placeholder="Email" />
  </div>

#File

code

Expend code


  <div className="grid w-full max-w-sm items-center gap-1.5">
      <Label htmlFor="picture">Picture</Label>
      <Input id="picture" type="file" />
  </div>


  <div className="grid w-full max-w-sm items-center gap-1.5">
      <Label htmlFor="picture">Picture</Label>
      <Input id="picture" type="file" />
  </div>

#Disabled

code

Expend code


  <Input type="text" placeholder="placeholder" disabled/>


  <Input type="text" placeholder="placeholder" disabled/>