Input Text

Components/Input and selection

ImplementationHTML/CSS/JSArk/ZagReact · shadcn/Base UIAngular — planned

Collects short text, structured data, or single-line values.

Status

Beta

Distribution

Source via shadcn

DesignUsageImplementationAccessibility

Documentation sectionDesignUsageImplementationAccessibility

Design

Functional preview

Loading functional preview…

Open interactive playground

Explore anatomy and visual states

Anatomy

1. Container
2. Native input

Variants and states

• disabled
• error
• filled
• lg
• md
• readonly
• sm

Open the complete design reference

Usage

When to use

• a person needs to enter a short or predictable value.

When not to use

• content requires multiple lines or selection among known options.

React composition

import { Input } from "@/components/ui/input"

<Input
  id="email"
  name="email"
  type="email"
  aria-label="E-mail"
  placeholder="nome@empresa.com"
/>

Implementation

Installation

Configure the namespace once in the React integration guide.

npm

npx shadcn@latest add @tis/input

pnpm

pnpm dlx shadcn@latest add @tis/input

yarn

yarn dlx shadcn@latest add @tis/input

bun

bunx --bun shadcn@latest add @tis/input

Public contract

Registry item

@tis/input

Distribution

Source copied into the application

Status

Beta

Technical architecture

Provider

Base UI

Provider role

React output provider

Behavioral architecture

Base UI

CSS

ds-tis/css

Open registry JSON

Inspect distributed source

Accessibility

Semantics and behavior

Provide a visible label whenever possible and connect helper/error text with aria-describedby and aria-invalid.

Consumer responsibility

• provide contextual accessible names and descriptions;
• preserve keyboard behavior, focus visibility, and semantic HTML;
• test real content, flow, and contrast in the application.

Validation evidence

Installed in the permanent React/Vite consumer and covered by production build, browser, responsive, and Axe checks.

Open stable accessibility guidance