Select

<ts-select> vv0.4.0

The ts-select component.

Open in Storybook for interactive demos.

Preview

<ts-select size="md">Content</ts-select>

Property	Attribute	Type	Default	Description
`disabled`	`disabled`	`boolean`	`false`	Renders the select as disabled.
`error`	`error`	`boolean`	`false`	Renders the select in an error state.
`errorMessage`	`error-message`	`string \| undefined`	—	Error message displayed below the select.
`helpText`	`help-text`	`string \| undefined`	—	Help text displayed below the select.
`label`	`label`	`string \| undefined`	—	Label text displayed above the select.
`multiple`	`multiple`	`boolean`	`false`	Allow multiple selections.
`name`	`name`	`string \| undefined`	—	Name attribute for form submission.
`placeholder`	`placeholder`	`string \| undefined`	—	Placeholder text when no value is selected.
`required`	`required`	`boolean`	`false`	Makes the select required.
`size`	`size`	`"lg" \| "md" \| "sm" \| "xl" \| "xs"`	`'md'`	The select size.
`value`	`value`	`string`	`''`	The current value.

Event	Detail	Bubbles	Composed	Description
`tsBlur`	`void`	Yes	Yes	Emitted when the select loses focus.
`tsChange`	`TsSelectChangeEventDetail`	Yes	Yes	Emitted when the value changes.
`tsFocus`	`void`	Yes	Yes	Emitted when the select gains focus.

Name	Description
`(default)`	Default slot for `<option>` elements.

Use ::part() to style internal elements:

Part	Description
`base`	The outer wrapper.
`dropdown`	The dropdown panel.
`error-text`	The error message wrapper.
`help-text`	The help text wrapper.
`label`	The label element.
`option`	An option in the dropdown list.
`trigger`	The select trigger button.

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

<ts-select size="md">Content</ts-select>

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

<TsSelect size="md">Content</TsSelect>