Input

Text input with consistent sizing, focus and invalid states.

import { Field, FieldLabel } from '@/components/ui/field'
import { Input } from '@/components/ui/input'

export function InputDemo() {
  return (
    <Field>
      <FieldLabel htmlFor="input-default">Case number</FieldLabel>
      <Input id="input-default" placeholder="2026-04812" />
    </Field>
  )
}

Installation

pnpm dlx shadcn@latest add https://rdf.dev.360online.com/r/input.json

Installs to @/components/ui/input.

Manual installation

Install the dependencies:

pnpm add @base-ui/react@^1.8.0

Copy the source into your project:

components/ui/input.tsx

import { Input as InputPrimitive } from '@base-ui/react/input'
import type * as React from 'react'
import { cn } from '@/lib/utils'

function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
	return (
		<InputPrimitive
			type={type}
			data-slot="input"
			className={cn(
				'h-10 w-full min-w-0 rounded-lg border border-input bg-background px-3 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground hover:border-primary/90 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',
				type !== 'file' &&
					'read-only:cursor-default read-only:border-dashed read-only:bg-muted/50 read-only:hover:border-input',
				className,
			)}
			{...props}
		/>
	)
}

export { Input }

A styled native HTML input element. It accepts every standard input attribute and has built-in styles for focus, disabled, invalid (aria-invalid) and file states. Icons, loading indicators and buttons (such as a password visibility toggle) are composed with InputGroup.

Features

Plain native input — all HTML input attributes and types are supported
Focus ring, disabled and aria-invalid error styling out of the box
Styled type="file" inputs
Dark mode support
Compose icons, text and buttons with InputGroup

Usage

import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'

<div className="grid w-full max-w-sm items-center gap-1.5">
  <Label htmlFor="case-number">Case number</Label>
  <Input id="case-number" placeholder="2026-04812" />
</div>

// Invalid state
<Input aria-invalid defaultValue="not-an-email" />

With an icon or a button, use InputGroup:

import { InputGroup, InputGroupAddon, InputGroupInput } from '@/components/ui/input-group'

<InputGroup>
  <InputGroupAddon>
    <MailIcon />
  </InputGroupAddon>
  <InputGroupInput type="email" placeholder="name@example.se" />
</InputGroup>

Examples

Default

An input paired with a FieldLabel.

With Description

A FieldDescription below the input explains what the value is used for.

import { Field, FieldDescription, FieldLabel } from '@/components/ui/field'
import { Input } from '@/components/ui/input'

export function InputWithDescription() {
  return (
    <Field>
      <FieldLabel htmlFor="input-email">Email</FieldLabel>
      <Input type="email" id="input-email" autoComplete="email" placeholder="sofia.berg@example.se" />
      <FieldDescription>We send receipts and decisions about your application here.</FieldDescription>
    </Field>
  )
}

Address

Several inputs in a FieldSet, with autoComplete hints so browsers can fill in the address.

import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSet,
} from '@/components/ui/field'
import { Input } from '@/components/ui/input'

export function InputAddress() {
  return (
    <FieldSet>
      <FieldLegend>Property address</FieldLegend>
      <FieldDescription>The address where the new bins should be delivered.</FieldDescription>
      <FieldGroup className="gap-4">
        <Field>
          <FieldLabel htmlFor="input-street">Street address</FieldLabel>
          <Input id="input-street" autoComplete="street-address" defaultValue="Storgatan 14" />
        </Field>
        <div className="grid grid-cols-[7rem_1fr] gap-3">
          <Field>
            <FieldLabel htmlFor="input-postcode">Postal code</FieldLabel>
            <Input id="input-postcode" autoComplete="postal-code" inputMode="numeric" defaultValue="722 15" />
          </Field>
          <Field>
            <FieldLabel htmlFor="input-city">City</FieldLabel>
            <Input id="input-city" autoComplete="address-level2" defaultValue="Västerås" />
          </Field>
        </div>
      </FieldGroup>
    </FieldSet>
  )
}

With Button

An input and a button side by side.

import { Button } from '@/components/ui/button'
import { Field, FieldLabel } from '@/components/ui/field'
import { Input } from '@/components/ui/input'

export function InputWithButton() {
  return (
    <Field>
      <FieldLabel htmlFor="input-newsletter">Get council meeting agendas by email</FieldLabel>
      <div className="flex gap-2">
        <Input id="input-newsletter" type="email" autoComplete="email" placeholder="name@example.se" />
        <Button variant="outline">Subscribe</Button>
      </div>
    </Field>
  )
}

Disabled

import { Field, FieldDescription, FieldLabel } from '@/components/ui/field'
import { Input } from '@/components/ui/input'

export function InputDisabled() {
  return (
    <Field data-disabled="true">
      <FieldLabel htmlFor="input-disabled">Personal identity number</FieldLabel>
      <Input id="input-disabled" placeholder="YYYYMMDD-XXXX" disabled />
      <FieldDescription>Filled in automatically when you sign in with e-ID.</FieldDescription>
    </Field>
  )
}

Readonly

Read-only inputs get a dashed border and a muted background.

import { Field, FieldDescription, FieldLabel } from '@/components/ui/field'
import { Input } from '@/components/ui/input'

export function InputReadonly() {
  return (
    <Field>
      <FieldLabel htmlFor="input-readonly">Registered by</FieldLabel>
      <Input readOnly id="input-readonly" defaultValue="Mikko Virtanen, Registry" />
      <FieldDescription>Set when the case was registered on 14 April 2026.</FieldDescription>
    </Field>
  )
}

Invalid

Set aria-invalid to show the destructive border and ring, and point aria-describedby at the error message.

import { Field, FieldError, FieldLabel } from '@/components/ui/field'
import { Input } from '@/components/ui/input'

export function InputInvalid() {
  return (
    <Field data-invalid="true">
      <FieldLabel htmlFor="input-invalid">Vehicle registration number</FieldLabel>
      <Input id="input-invalid" defaultValue="ABC 12" aria-invalid aria-describedby="input-invalid-error" />
      <FieldError id="input-invalid-error">Use three letters and three characters, e.g. ABC 123 or ABC 12D.</FieldError>
    </Field>
  )
}

File Input

import { Field, FieldDescription, FieldLabel } from '@/components/ui/field'
import { Input } from '@/components/ui/input'

export function InputFile() {
  return (
    <Field>
      <FieldLabel htmlFor="input-file">Site plan</FieldLabel>
      <Input id="input-file" type="file" accept=".pdf,.dwg" />
      <FieldDescription>PDF or DWG, scale 1:400 or 1:500.</FieldDescription>
    </Field>
  )
}

With Validation

Client-side validation of a case number that toggles aria-invalid once the value is complete.

import * as React from 'react'
import { Field, FieldDescription, FieldError, FieldLabel } from '@/components/ui/field'
import { Input } from '@/components/ui/input'

export function InputWithValidation() {
  const [value, setValue] = React.useState('')
  const valid = /^\d{4}-\d{5}$/.test(value)
  const showError = value.length >= 10 && !valid

  return (
    <Field data-invalid={showError || undefined}>
      <FieldLabel htmlFor="input-validation">Case number</FieldLabel>
      <Input
        id="input-validation"
        placeholder="2026-04812"
        inputMode="numeric"
        maxLength={10}
        value={value}
        onChange={(event) => setValue(event.target.value)}
        aria-invalid={showError || undefined}
        aria-describedby="input-validation-hint"
      />
      {showError ? (
        <FieldError id="input-validation-hint">Case numbers are a year, a dash and five digits.</FieldError>
      ) : (
        <FieldDescription id="input-validation-hint">
          {valid ? 'Looks good — press Enter to open the case.' : 'A year, a dash and five digits.'}
        </FieldDescription>
      )}
    </Field>
  )
}

With Icon

An icon composed with InputGroup.

import { MailIcon } from 'lucide-react'
import { Field, FieldLabel } from '@/components/ui/field'
import { InputGroup, InputGroupAddon, InputGroupInput } from '@/components/ui/input-group'

export function InputWithIcon() {
  return (
    <Field>
      <FieldLabel htmlFor="input-icon">Contact email</FieldLabel>
      <InputGroup>
        <InputGroupAddon>
          <MailIcon />
        </InputGroupAddon>
        <InputGroupInput id="input-icon" type="email" placeholder="omar.haddad@example.se" />
      </InputGroup>
    </Field>
  )
}

Loading

A Spinner composed with InputGroup, for example while address suggestions load.

import { SearchIcon } from 'lucide-react'
import { Field, FieldLabel } from '@/components/ui/field'
import { InputGroup, InputGroupAddon, InputGroupInput } from '@/components/ui/input-group'
import { Spinner } from '@/components/ui/spinner'

export function InputLoading() {
  return (
    <Field>
      <FieldLabel htmlFor="input-loading">Search addresses</FieldLabel>
      <InputGroup>
        <InputGroupAddon>
          <SearchIcon />
        </InputGroupAddon>
        <InputGroupInput id="input-loading" defaultValue="Kungsgatan" />
        <InputGroupAddon align="inline-end">
          <Spinner />
        </InputGroupAddon>
      </InputGroup>
    </Field>
  )
}

Password

A password visibility toggle composed with InputGroup and InputGroupButton.

import { EyeIcon, EyeOffIcon } from 'lucide-react'
import * as React from 'react'
import { Field, FieldDescription, FieldLabel } from '@/components/ui/field'
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
} from '@/components/ui/input-group'

export function InputPassword() {
  const [visible, setVisible] = React.useState(false)
  return (
    <Field>
      <FieldLabel htmlFor="input-password">Password</FieldLabel>
      <InputGroup>
        <InputGroupInput id="input-password" type={visible ? 'text' : 'password'} autoComplete="current-password" />
        <InputGroupAddon align="inline-end">
          <InputGroupButton
            size="icon-xs"
            aria-label={visible ? 'Hide password' : 'Show password'}
            aria-pressed={visible}
            onClick={() => setVisible((v) => !v)}
          >
            {visible ? <EyeOffIcon /> : <EyeIcon />}
          </InputGroupButton>
        </InputGroupAddon>
      </InputGroup>
      <FieldDescription>For staff accounts without e-ID. At least 12 characters.</FieldDescription>
    </Field>
  )
}

Props

Input accepts all native input props (React.ComponentProps<'input'>), including className. It has no custom props.

Accessibility

Uses the native HTML input element
Pair with a Label via htmlFor / id
Use aria-invalid and aria-describedby to announce errors
Clear focus indicators and keyboard support

Best Practices

Use the appropriate type (text, email, password, etc.) for validation and mobile keyboards.
Always use a label; placeholders are supplementary only.
Mark invalid fields with aria-invalid and show a clear error message.
Use InputGroup instead of absolutely positioned elements for icons and buttons.

Input Group
Textarea
Label
Field
Form