Input

Usage

import { Input } from '@jamie/ui/input'
 
export function InputDemo() {
  return <Input type="text" placeholder="Search meetings..." className="w-[320px]" />
}

With Label

Pair an input with a Field and Label for accessible form fields.

import { Field, FieldLabel } from '@jamie/ui/field'
import { Input } from '@jamie/ui/input'
 
export function InputWithLabelDemo() {
  return (
    <Field className="w-[320px]">
      <FieldLabel>Meeting title</FieldLabel>
      <Input placeholder="Q3 Revenue Review" />
    </Field>
  )
}

File

Use type="file" for file upload inputs.

import { Field, FieldLabel } from '@jamie/ui/field'
import { Input } from '@jamie/ui/input'
 
export function InputFileDemo() {
  return (
    <Field className="w-[320px]">
      <FieldLabel>Attachment</FieldLabel>
      <Input type="file" />
    </Field>
  )
}

Disabled

A disabled input prevents user interaction.

import { Input } from '@jamie/ui/input'
 
export function InputDisabledDemo() {
  return <Input type="text" placeholder="Meeting locked" disabled className="w-[320px]" />
}