form fields

<tc-input>

Form-associated text input with label, helper text, error state, and the full validity API.

import "@ra9/tan-compose-kit/input"

Props

Name	Type	Default	Description
`value`	`string`	`""`	Current value. Two-way synced with the underlying input as the user types.
`name`	`string`	`""`	Field name used when submitted as part of a `<form>`.
`type`	`"text" \| "email" \| "password" \| "number" \| "search" \| "tel" \| "url"`	`"text"`	Native input type forwarded to the underlying `<input>`.
`placeholder`	`string`	`""`	Placeholder text shown when the input is empty.
`label`	`string`	`""`	Label rendered above the input. Pair with `required` to show a red star.
`helper`	`string`	`""`	Small helper text below the input. Hidden when `error` is set.
`error`	`string`	`""`	Error message; when non-empty paints the input invalid and replaces the helper.
`disabled`	`boolean`	`false`	Disables the input; reflects to the host attribute.
`required`	`boolean`	`false`	Marks the field required for form validation; reflects to the host attribute.

Events

Event	Detail	When
`tc-input`	`{ value: string }`	Fires on every keystroke with the latest value.

CSS variables

Variable	Default	Description
`--tc-input-bg`	`var(--tc-color-surface, #ffffff)`	Background color of the input.
`--tc-input-fg`	`var(--tc-color-ink, #14171f)`	Foreground (text) color.
`--tc-input-border`	`var(--tc-color-rule-strong, #d9cfb8)`	Resting border color.
`--tc-input-border-focus`	`var(--tc-color-accent, #a16939)`	Border color when focused.
`--tc-input-error`	`var(--tc-color-danger, #b3261e)`	Border + text color in the error state.
`--tc-input-helper`	`var(--tc-color-ink-muted, #6b7280)`	Color of the helper text.
`--tc-input-radius`	`var(--tc-radius-md, 8px)`	Corner radius.
`--tc-input-font`	`var(--tc-font-sans, …)`	Font family.

Examples

Basic usage

A labelled input with helper text. The label, helper, and error are all props — no extra markup.

<tc-input label="Full name" placeholder="Carlos Nah" helper="As it appears on your ID." ></tc-input>

Types

The type prop forwards to the native input so you get the right keyboard on mobile and the right validity rules in a form.

<tc-input type="email" label="Email" required></tc-input> <tc-input type="password" label="Password" required></tc-input>

Error state

Set error to a message and the input paints invalid. The helper is hidden while the error is set.

<tc-input label="Email" value="not-an-email" error="That doesn't look like an email." ></tc-input>

In a form

tc-input is form-associated. It submits under its name and participates in reset.

Theming

Every variable above can be overridden on a parent or on the host. The --tc-input-* tokens are shared with tc-textarea, tc-select, tc-checkbox, tc-radio-group, and tc-file so re-skinning one re-skins them all.

<tc-input style="--tc-input-border-focus: #2b6cb0; --tc-input-radius: 4px;" label="Custom focus ring" ></tc-input>

Accessibility

Renders a real <input> with aria-invalid reflecting the error state.
The label is associated visually but uses <label> markup; click-to-focus works without extra wiring.
required is forwarded to the native input so the browser's built-in validation messages apply.
The red asterisk next to the label is aria-hidden; screen readers announce required state from the input itself.

← All components