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

Input

A text input field that allows users to enter and edit text.

Input fields are fundamental form elements used to collect user information. They support various input types (text, email, password, number, etc.) and include built-in browser validation. Inputs are commonly used in forms, search bars, and anywhere users need to provide textual data.

The component automatically handles focus states, hover effects, and disabled states with appropriate visual feedback. It integrates seamlessly with form libraries and supports all standard HTML input attributes.

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.

Component Slots

The following data attributes are used to identify component parts:

input

Additional Classes

Other CSS classes used by this component:

input

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Icon Label

On This Page

Example Installation Props Examples Disabled Types With Label Styling Component Slots Additional Classes Accessibility

Contribute