Components
Select
Documentation for the Select component.
Select
Preview
Interactive
Choose Role
Properties
Size
Live Code Snippet
import { Select, SelectItem } from '@moul-dev/ui';
import { useState } from 'react';
import type { Key } from 'react-aria-components';
export default function Example() {
const [selectedKey, setSelectedKey] = useState<Key>('editor');
return (
<Select
selectedKey={selectedKey}
onSelectionChange={setSelectedKey} label="Choose Role" placeholder="Select a profile..."
>
<SelectItem id="admin">Administrator</SelectItem>
<SelectItem id="editor">Editor</SelectItem>
<SelectItem id="viewer">Viewer</SelectItem>
</Select>
);
}The Select component is built with React Aria and styled using StyleX.
Import
import { Select } from '@moul-dev/ui';Usage
Here is a basic example of how to use the Select component:
import { Select } from '@moul-dev/ui';
export default function Example() {
return (
<Select>
{/* Component content */}
</Select>
);
}Props
Select Props
Prop
Type
Default className: react-aria-Select
| Render Prop | CSS Selector |
|---|---|
isOpen Whether the select popover is open. | [data-open] |
isFocused Whether the select is focused. | [data-focused] |
isFocusVisible Whether the select is keyboard focused. | [data-focus-visible] |
isDisabled Whether the select is disabled. | [data-disabled] |