Select

A dropdown menu for selecting a value from a list of options. Select component to select value from options.

When To Use

• A dropdown menu for displaying choices - an elegant alternative to the native <select> element
• Utilizing Radio is recommended when there are fewer total options (less than 5)

Import

import { TxSelect } from "tx-design-ui";

Examples

Basic Usage

Basic select usage.

import { TxSelect } from "tx-design-ui";
import { useState } from "react";

const options = [
  { label: "Option 1", value: "1" },
  { label: "Option 2", value: "2" },
  { label: "Option 3", value: "3" },
];

function App() {
  const [value, setValue] = useState("");

  return <TxSelect options={options} value={value} onChange={val => setValue(val)} placeholder="Select an option" />;
}

Sizes

Select comes in three sizes: small, medium (default), and large.

<TxSelect options={options} size="small" />
<TxSelect options={options} size="medium" />
<TxSelect options={options} size="large" />

Disabled

Disabled select.

<TxSelect options={options} value="1" disabled />

Status

Add status to Select with status, which could be success, warning, or error.

<TxSelect options={options} status="success" />
<TxSelect options={options} status="warning" />
<TxSelect options={options} status="error" />

Full Width

Make the select take full width of its container.

<TxSelect options={options} fullWidth />

Empty State

When no options are available.

<TxSelect options={[]} placeholder="No options" />

API

Property	Type	Default	Description
options	Array<{label: string, value: any}>	[]	Data source for select options
value	any	-	Current selected value
onChange	function(value, option)	-	Called when select an option
placeholder	string	'Select an option'	Placeholder text
disabled	boolean	false	Whether disabled select
size	'small' | 'medium' | 'large'	'medium'	Size of select
status	'success' | 'warning' | 'error'	-	Set validation status
fullWidth	boolean	false	Take full width of container

Notes

• The dropdown automatically closes when clicking outside
• The selected option is highlighted in the dropdown
• Empty state is shown when no options are provided
• Each option should have a unique value
• The label is what's displayed to the user, while value is used internally