Input Text

Components/Input and selection

ImplementationHTML/CSS/JSArk/Zag — plannedReact · shadcn/Base UIAngular

A standalone Angular component over a native input, with a complete Form Field, icons, validation, and ControlValueAccessor.

DesignUsageImplementationAccessibility

Documentation sectionDesignUsageImplementationAccessibility

Design

Functional preview

Running with the native Angular component and HTML input + Angular Forms.

Loading functional preview…

Open the Angular playground

Anatomy

Email* 4

1 2 3

Please enter a valid email. 5

We'll never share your email. 6

1 Wrapper (.ds-input) — container with border, radius, background, padding and gap.
2 Icon (optional, .ds-input__icon) — 24px frame; 16/20/24px ícone in sm/md/lg.
3 Field (.ds-input__field) — the native <input> element.
4 Label (.ds-field__label) — external, via Form Field.
5 Error message (.ds-field__error) — external, via Form Field.
6 Helper text (.ds-field__helper) — external, via Form Field.

Default

Label

Helper text

Sizes

With Icon

States

In Figma, State only represents exclusive visual states: Default, Hover, Focus, and Disabled. Filled, Error, and Read-only are separate properties; Error combines with Default/Hover/Focus, and Read-only combines with Default/Focus.

Error

Email address

Please enter a valid email address.

Disabled

Readonly

Figma property	Value / CSS trigger	Visual change	Token
State	Default	Neutral surface and border	component.field.bg.default, component.field.border-color.default
State	Hover / :hover	Darker border	component.field.border-color.hover
State	Focus / :focus-within	2px outline ring, component radius	component.field.border-color.focus, component.focus-ring.*, component.input.focus-ring.radius.default
State	Disabled / [disabled] or .ds-input--disabled	Muted bg, border and content	component.field.bg.disabled, component.field.value.color.disabled
Error	True / .ds-input--error or .ds-field--error .ds-input	Red border and error focus ring	component.field.border-color.error, component.focus-ring.color.error
Error + State	True + Hover / .ds-input--error:hover	Darker red border	component.field.border-color.error-hover
Read-only	True / [readonly] or .ds-input--readonly	Readonly bg with neutral focus ring	component.field.bg.readonly, component.focus-ring.color.readonly

With Form Field

Full name

Enter your first and last name.

Email*

Please enter a valid email address. We'll never share your email.

Figma properties

Property	Type	Default	Description
Show Label	Boolean	true	Shows or hides the label row (including required asterisk)
Label	Text	"Rótulo"	Label text (label/md)
Required	Boolean	false	Shows * in feedback/error/content/default next to the label
Show Helper Text	Boolean	true	Shows or hides the helper text below the control
Helper Text	Text	"Texto auxiliar"	Caption/sm annotation (content/secondary)

Usage

When to use

Use when

The user needs to enter a short, single-line text value: name, email, phone, URL, search query, password.

Don't use when

The expected input is multi-line (use Textarea), the user must pick from a fixed set of options (use Select, Checkbox, or Radio), or the value is binary on/off (use Toggle).

Situation	Use instead
Multi-line text	Textarea
Choosing from a list	Select
Yes/no or on/off	Toggle ou Checkbox
Searching with autocomplete	Custom search component (future)

Best practices

Full name

Faça

Always use inside a Form Field wrapper with a visible label.

Não faça

Use a placeholder as the only label — it disappears when the user starts typing.

Email address

Zip code

Faça

Match the input size to the expected content length. Use full-width for emails, shorter widths for zip codes.

Email address

Zip code

Não faça

Make all inputs the same width regardless of content.

Email*

Email is required. Enter a valid email address.

Faça

Show error state with ds-input--error AND ds-field--error, with aria-invalid="true" and a clear error message.

Email*

Não faça

Show error styling without an error message — the user needs to know what went wrong.

Content guidelines

Rule	Example
Placeholder text should be an example value, not an instruction	"john@example.com" — not "Enter your email"
Labels should be 1-3 words, noun or noun phrase	"Email address", "Phone number"
Helper text is optional, use for format hints	"Must be at least 8 characters"
Error messages should say what went wrong AND how to fix it	"Email is required. Enter a valid email address."
Required fields: add required indicator to the label	<span class="ds-field__required">*</span>

Related

Textarea Select

When to choose this output

Choose this native Angular output when the application already uses Angular. It consumes the same DS CSS and has no dependency on the Web runtime or React adapters.

Implementation

Status

Beta

Distribution

Validated Angular tarball

Installation

npm

npm install ./dist/tis-angular-0.0.0-beta.0.tgz ds-tis

pnpm

pnpm add ./dist/tis-angular-0.0.0-beta.0.tgz ds-tis

yarn

yarn add ./dist/tis-angular-0.0.0-beta.0.tgz ds-tis

bun

bun add ./dist/tis-angular-0.0.0-beta.0.tgz ds-tis

Validated workspace beta

The command installs the locally generated and consumer-tested tarball. @tis/angular is not published on the public npm registry.

DS styles

@import "ds-tis/css";

Angular imports

import { FormsModule } from '@angular/forms'
import { TisInput, TisInputIconStart } from '@tis/angular/input'

Template

<tis-input
  name="email"
  label="E-mail"
  type="email"
  [(ngModel)]="email"
  helperText="Use seu e-mail corporativo."
  [required]="true"
>
  <svg tisInputIconStart aria-hidden="true">…</svg>
</tis-input>

Public contract

Package

@tis/angular

Entrypoint

@tis/angular/input

Primitive

HTML input + Angular Forms

Status

Beta

Accessibility

Keyboard interaction

Key	Action
Tab	Moves focus into / out of the input
Any character	Types into the field
Escape	Clears focus (browser default)

Accessibility

WCAG criterion	Requirement	Status
1.3.1 Info and Relationships (A)	Label associated via for/id	✓
1.3.5 Identify Input Purpose (AA)	Use autocomplete attribute for personal data fields	✓ (when implemented)
2.4.11 Focus Appearance (AA)	Focus ring 2px + 2px offset	✓
3.3.1 Error Identification (A)	Error state + message via aria-invalid + aria-describedby	✓
3.3.2 Labels or Instructions (A)	Visible label always present	✓
4.1.2 Name, Role, Value (A)	Native <input> provides role	✓

ARIA attributes summary

for / id — always pair <label> with <input> using matching attributes.
aria-invalid="true" — set on the native input when in error state.
aria-describedby — link the input to the error message element ID so screen readers announce the error.
autocomplete — use appropriate values (name, email, tel, etc.) for personal data fields.

Required and invisible label

When Required = true, add aria-required="true" to the <input> — the visual asterisk (.ds-field__required) is decorative (aria-hidden="true"). When Show Label = false, use aria-label on the <input>. Helper Text should be linked via aria-describedby.

Output responsibility

Preserve native button semantics, submit behavior, accessible names, disabled state, and visible focus.

Validation evidence

Covered by its independent Storybook output plus browser, responsive, keyboard, Axe, and bundle checks.

Open the stable reference