mirror of
https://github.com/Kong/insomnia.git
synced 2026-04-18 05:08:40 -04:00
e43bd82620
* feat: form component * feat: use twMerge to support class overide * Spike: Add markdown format doc support for base-components (#9368) * initial check-in * add things * update select.mdx * use react live things * add package-json * Revert "add package-json" This reverts commit c57abf6178f39e631ec7fe6634cb4e6afd950fdb. * update comment * update docs * type fix * tailwind v4 upgrade * upgrade tailwind v4 in docusaurus * feat: add more components (#9426) * update * update --------- Co-authored-by: Kent Wang <kent.wang@konghq.com>
82 lines
2.7 KiB
Plaintext
82 lines
2.7 KiB
Plaintext
---
|
|
id: select
|
|
sidebar_label: 'Select'
|
|
sidebar_position: 3
|
|
---
|
|
|
|
# Select
|
|
|
|
A customizable dropdown select component built on top of React Aria Components, providing accessible single-selection functionality with keyboard navigation and visual states.
|
|
|
|
## Features
|
|
|
|
- **Single Selection**: Currently supports single-item selection (based on react-aria limitations)
|
|
- **Accessible**: Built with React Aria Components for full ARIA compliance and keyboard navigation
|
|
- **Visual States**: Automatic styling for disabled, invalid, hover, pressed, and focused states
|
|
- **Custom Styling**: Integrates with Tailwind CSS and CSS variables for theming
|
|
- **Icon Support**: Includes chevron indicator and checkmark for selected items
|
|
- **Responsive**: Popover width automatically matches trigger width
|
|
|
|
## Props
|
|
|
|
| Prop | Type | Required | Description |
|
|
| ----------- | ----------------------------------------- | -------- | --------------------------------------------------------- |
|
|
| `options` | `{ label: string; value: string }[]` | Yes | Array of selectable options |
|
|
| `value` | `string \| number \| null` | No | Currently selected value (controlled) |
|
|
| `onChange` | `(key: string \| number \| null) => void` | No | Callback fired when selection changes |
|
|
| `label` | `string` | No | Label for the select (currently unused in implementation) |
|
|
| `className` | `string` | No | Additional CSS classes for the select |
|
|
|
|
### Basic Usage
|
|
|
|
```tsx live
|
|
<Select
|
|
options={[
|
|
{ label: 'Option 1', value: 'opt1' },
|
|
{ label: 'Option 2', value: 'opt2' },
|
|
{ label: 'Option 3', value: 'opt3' },
|
|
]}
|
|
/>
|
|
```
|
|
|
|
### Disabled
|
|
|
|
```tsx live
|
|
<Select isDisabled />
|
|
```
|
|
|
|
### Disabled Options
|
|
|
|
```tsx live
|
|
function DisabledOption() {
|
|
const [selected, setSelected] = useState<string | null>(null);
|
|
|
|
return (
|
|
<Select
|
|
onChange={setSelected}
|
|
value={selected}
|
|
disabledKeys={['B']}
|
|
options={[
|
|
{ label: 'A', value: 'A' },
|
|
{ label: 'BBBBBB', value: 'B' },
|
|
{ label: 'CCCCCC', value: 'C' },
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
```
|
|
|
|
## Styling
|
|
|
|
### CSS Variables
|
|
|
|
The component uses the following CSS variables for theming:
|
|
|
|
- `--color-bg`: Select background color
|
|
- `--color-font`: Select text color
|
|
- `--hl-xs`: Highlight for hover/active
|
|
- `--hl-sm`: Standard border color
|
|
- `--color-danger`: Error/invalid state color
|
|
|
|
You can customize these variables in your CSS to theme the select appearance.
|