Combobox

<ts-combobox> vv0.6.3

The ts-combobox component.

Open in Storybook for interactive demos.

Preview

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

Property	Attribute	Type	Default	Description
`disabled`	`disabled`	`boolean`	`false`	Renders the combobox as disabled.
`error`	`error`	`string \| undefined`	—	Error message displayed below the combobox.
`helpText`	`help-text`	`string \| undefined`	—	Help text displayed below the combobox.
`label`	`label`	`string \| undefined`	—	Label text displayed above the combobox.
`placeholder`	`placeholder`	`string \| undefined`	—	Placeholder text for the input.
`required`	`required`	`boolean`	`false`	Makes the combobox required.
`size`	`size`	`"lg" \| "md" \| "sm" \| "xl" \| "xs"`	`'md'`	The combobox size.
`value`	`value`	`string`	`''`	The current selected value.

Event	Detail	Bubbles	Composed	Description
`tsChange`	`\{ value: string; \}`	Yes	Yes	Emitted when a value is selected.
`tsInput`	`\{ inputValue: string; \}`	Yes	Yes	Emitted when the input text changes.

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.
`input`	The text input element.
`input-wrapper`	The input wrapper containing the text input and chevron.
`label`	The label element.
`option`	An option in the dropdown list.

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

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

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

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