Input

Text inputs allow users to enter and edit text. The Davis Input component includes labels, validation states, helper text, and icon support.

Installation

npm install @libretexts/davis-react

Basic Usage

import { Input } from '@libretexts/davis-react';

export default function Example() {
  return (
    <Input
      name="email"
      label="Email address"
      type="email"
      placeholder="you@example.com"
    />
  );
}

Sizes

Inputs are available in three sizes.

<Input name="small" label="Small Input" size="sm" />
<Input name="medium" label="Medium Input" size="md" />
<Input name="large" label="Large Input" size="lg" />

Required Fields

Mark inputs as required with the required prop, which adds an asterisk to the label.

<Input
  name="username"
  label="Username"
  required
/>

Helper Text

Provide additional context with helper text.

<Input
  name="password"
  label="Password"
  type="password"
  helperText="Must be at least 8 characters"
/>

Error State

Show validation errors with the error and errorMessage props.

import { Input } from '@libretexts/davis-react';
import { useState } from 'react';

export default function Example() {
  const [email, setEmail] = useState('');
  const isInvalid = email && !email.includes('@');

  return (
    <Input
      name="email"
      label="Email"
      type="email"
      value={email}
      onChange={(e) => setEmail(e.target.value)}
      error={isInvalid}
      errorMessage={isInvalid ? 'Please enter a valid email address' : undefined}
    />
  );
}

With Icons

Add left or right icons to enhance the input's purpose.

import { Input } from '@libretexts/davis-react';

function SearchIcon() {
  return (
    <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
    </svg>
  );
}

export default function Example() {
  return (
    <Input
      name="search"
      label="Search"
      leftIcon={<SearchIcon />}
      placeholder="Search..."
    />
  );
}

Props

Prop	Type	Default	Description
`name`	`string`	-	Required. Input name attribute
`label`	`string`	-	Required. Input label text
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Input size
`variant`	`'default' \| 'error'`	`'default'`	Visual variant
`error`	`boolean`	`false`	Show error state
`errorMessage`	`string`	-	Error message to display
`helperText`	`string`	-	Helper text below input
`required`	`boolean`	`false`	Mark as required (adds asterisk)
`leftIcon`	`ReactNode`	-	Icon to display on the left
`rightIcon`	`ReactNode`	-	Icon to display on the right
`disabled`	`boolean`	`false`	Disable the input

Plus all standard HTML input attributes (type, placeholder, value, onChange, etc.)

Accessibility

The Input component is built with accessibility in mind:

Associates labels with inputs using htmlFor and id
Uses aria-invalid for error states
Uses aria-describedby for helper text and error messages
Supports required attribute for form validation
Visual required indicator (asterisk) for screen reader users
Proper color contrast for all states

Best practices:

Always provide a descriptive label
Use helperText to provide input formatting guidance
Use errorMessage for validation feedback
Use required prop for required fields
Ensure custom icons have appropriate ARIA labels if they convey meaning