Input

Renders a text input for capturing form data.

Variants

import { Input } from '@immit/ui/input'
 
export function InputVariants() {
  return <Input variant="default" placeholder="Type away..." />
}

Sizes

import { Input } from '@immit/ui/input'
 
export function InputSizes() {
  return (
    <div className="flex flex-wrap gap-2">
      <Input size="sm" placeholder="Small" />
      <Input size="default" placeholder="Default" />
      <Input size="lg" placeholder="Large" />
    </div>
  )
}

With Label

import { Input } from '@immit/ui/input'
import { Label } from '@immit/ui/label'
 
export function InputWithLabel() {
  return (
    <div className="grid w-full gap-1">
      <Label htmlFor="email">Email</Label>
      <Input type="email" placeholder="Enter an email" />
    </div>
  )
}

With Button

import { Button } from '@immit/ui/button'
import { Input } from '@immit/ui/input'
 
export function InputWithButton() {
  return (
    <div className="flex w-full gap-2">
      <Input type="email" placeholder="Enter an email" />
      <Button variant="default">Submit</Button>
    </div>
  )
}