Input

<ts-input> vv0.4.0

The ts-input component.

Open in Storybook for interactive demos.

Preview

<ts-input size="md"></ts-input>

Property	Attribute	Type	Default	Description
`autocomplete`	`autocomplete`	`string \| undefined`	—	Autocomplete attribute.
`disabled`	`disabled`	`boolean`	`false`	Renders the input as disabled.
`error`	`error`	`string \| undefined`	—	Renders the input in an error state with an error message.
`helpText`	`help-text`	`string \| undefined`	—	Help text displayed below the input.
`label`	`label`	`string \| undefined`	—	Label text displayed above the input.
`maxlength`	`maxlength`	`number \| undefined`	—	Maximum character length.
`minlength`	`minlength`	`number \| undefined`	—	Minimum character length.
`name`	`name`	`string \| undefined`	—	Name attribute for form submission.
`pattern`	`pattern`	`string \| undefined`	—	Pattern for validation (regex string).
`placeholder`	`placeholder`	`string \| undefined`	—	Placeholder text.
`readonly`	`readonly`	`boolean`	`false`	Renders the input as readonly.
`required`	`required`	`boolean`	`false`	Makes the input required.
`size`	`size`	`"lg" \| "md" \| "sm" \| "xl" \| "xs"`	`'md'`	The input’s size.
`type`	`type`	`"email" \| "number" \| "password" \| "search" \| "tel" \| "text" \| "url"`	`'text'`	The input type.
`value`	`value`	`string`	`''`	The input’s value.

Event	Detail	Bubbles	Composed	Description
`tsBlur`	`void`	Yes	Yes	Emitted when the input loses focus.
`tsChange`	`TsChangeEventDetail<string>`	Yes	Yes	Emitted when the value changes (on blur / commit).
`tsFocus`	`void`	Yes	Yes	Emitted when the input gains focus.
`tsInput`	`TsChangeEventDetail<string>`	Yes	Yes	Emitted when the value changes (on input).
`tsValidate`	`TsValidationEventDetail`	Yes	Yes	Emitted on validation.

Method	Signature	Description
`selectText`	`selectText() => Promise<void>`	Programmatically select the input text.
`setFocus`	`setFocus() => Promise<void>`	Programmatically focus the input.

Name	Description
`help-text`	Help text displayed below the input.
`prefix`	Content before the input (e.g., icon or currency symbol).
`suffix`	Content after the input (e.g., icon or clear button).

Use ::part() to style internal elements:

ts-input::part(base) {
  /* your custom styles */
}

<ts-input size="md"></ts-input>

import { TsInput } from '@tessera-ui/react';

<TsInput size="md"></TsInput>