🚧 This documentation is a work in progress. Coming from @studs/react? See our Migration Guide.

Input

Input is a text entry field that allows users to enter and edit text in a single line.

Text inputs are fundamental form elements that support all standard HTML input types and attributes, making them versatile for various data entry needs such as text, email, password, numbers, and more. Inputs provide visual feedback for focus, validation states, and disabled states to guide users through data entry tasks.

Use inputs for collecting user information in forms, search interfaces, or any scenario requiring text-based data entry. Inputs should be paired with labels to clearly identify their purpose and improve accessibility. Consider using appropriate input types and validation attributes to enhance the user experience and data quality.

Example

Installation


npm install @strongtie/design-system

import { Input } from "@strongtie/design-system/input"

Props

All components accept standard HTML attributes and React props.

Examples

Disabled

Disabled Input

"use client"

import { Input } from "@strongtie/design-system/input"
import { Label } from "@strongtie/design-system/label"

export function InputDisabled() {
  return (
    <div className="flex flex-col gap-2">
      <Label htmlFor="disabled-input">Disabled Input</Label>
      <Input
        id="disabled-input"
        type="text"
        placeholder="You cannot edit this"
        disabled
        defaultValue="This input is disabled"
      />
    </div>
  )
}

Types

Text

Password

Number

Date

"use client"

import { Input } from "@strongtie/design-system/input"
import { Label } from "@strongtie/design-system/label"

export function InputTypes() {
  return (
    <div className="grid w-full max-w-sm gap-4">
      <div className="grid items-center gap-1.5">
        <Label htmlFor="text">Text</Label>
        <Input type="text" id="text" placeholder="Enter text" />
      </div>
      <div className="grid items-center gap-1.5">
        <Label htmlFor="email">Email</Label>
        <Input type="email" id="email" placeholder="email@example.com" />
      </div>
      <div className="grid items-center gap-1.5">
        <Label htmlFor="password">Password</Label>
        <Input type="password" id="password" placeholder="Password" />
      </div>
      <div className="grid items-center gap-1.5">
        <Label htmlFor="number">Number</Label>
        <Input type="number" id="number" placeholder="123" />
      </div>
      <div className="grid items-center gap-1.5">
        <Label htmlFor="date">Date</Label>
        <Input type="date" id="date" />
      </div>
    </div>
  )
}

With Label

"use client"

import { Input } from "@strongtie/design-system/input"
import { Label } from "@strongtie/design-system/label"

export function InputWithLabel() {
  return (
    <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>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Classes

CSS classes used by this component:

input

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Input Group Item

On This Page

Example Installation Props Examples Disabled Types With Label Styling Classes Accessibility

Contribute