> Native Solid 2 fork. Original documentation and designs © WorkOS; historical posts retain their original context.

# Select

Displays a list of options for the user to pick from—triggered by a button.

## Features

- Can be controlled or uncontrolled.

- Offers 2 positioning modes.

- Supports items, labels, groups of items.

- Focus is fully managed.

- Full keyboard navigation.

- Supports custom placeholder.

- Typeahead support.

- Supports Right to Left direction.

## Anatomy

Import all parts and piece them together.

```jsx
import { Select } from "@radix-solid/primitives";

export default () => <Select.Root>

		<Select.Trigger>

			<Select.Value />

			<Select.Icon />

		</Select.Trigger>



		<Select.Portal>

			<Select.Content>

				<Select.ScrollUpButton />

				<Select.Viewport>

					<Select.Item value="first">

						<Select.ItemText />

						<Select.ItemIndicator />

					</Select.Item>



					<Select.Group>

						<Select.Label />

						<Select.Item value="second">

							<Select.ItemText />

							<Select.ItemIndicator />

						</Select.Item>

					</Select.Group>



					<Select.Separator />

				</Select.Viewport>

				<Select.ScrollDownButton />

				<Select.Arrow />

			</Select.Content>

		</Select.Portal>

	</Select.Root>;
```

## API Reference

### Root

Contains all the parts of a select.

| Prop                                                                                                                                                          | Type       | Default |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | ------- |
| `defaultValue`The value of the select when initially rendered. Use when you do not need to control the state of the select.                                   | `string`   | —       |
| `value`The controlled value of the select. Should be used in conjunction with `onValueChange`.                                                                | `string`   | —       |
| `onValueChange`Event handler called when the value changes.                                                                                                   | `function` | —       |
| `defaultOpen`The open state of the select when it is initially rendered. Use when you do not need to control its open state.                                  | `boolean`  | —       |
| `open`The controlled open state of the select. Must be used in conjunction with `onOpenChange`.                                                               | `boolean`  | —       |
| `onOpenChange`Event handler called when the open state of the select changes.                                                                                 | `function` | —       |
| `dir`The reading direction of the select when applicable. If omitted, inherits globally from `DirectionProvider` or assumes LTR (left-to-right) reading mode. | `enum`     | —       |
| `name`The name of the select. Submitted with its owning form as part of a name/value pair.                                                                    | `string`   | —       |
| `disabled`When `true`, prevents the user from interacting with select.                                                                                        | `boolean`  | —       |
| `required`When `true`, indicates that the user must select a value before the owning form can be submitted.                                                   | `boolean`  | —       |

### Trigger

The button that toggles the select. The `Select.Content` will position itself by aligning over the trigger.

| Prop                                                                                                                                                                    | Type      | Default |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
| `asChild`Render through a single-target factory, merging props and behavior with the chosen host. Read our [Composition](../guides/composition) guide for more details. | `boolean` | `false` |

| Data attribute       | Values                       |
| -------------------- | ---------------------------- |
| `[data-state]`       | `"open" \| "closed"`         |
| `[data-disabled]`    | Present when disabled        |
| `[data-placeholder]` | Present when has placeholder |

### Value

The part that reflects the selected value. By default the selected item's text will be rendered. if you require more control, you can instead control the select and pass your own `children`. It should not be styled to ensure correct positioning. An optional `placeholder` prop is also available for when the select has no value.

| Prop                                                                                                                                                                    | Type      | Default |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
| `asChild`Render through a single-target factory, merging props and behavior with the chosen host. Read our [Composition](../guides/composition) guide for more details. | `boolean` | `false` |
| `placeholder`The content that will be rendered inside the `Select.Value` when no `value` or `defaultValue` is set.                                                      | `Element` | —       |

### Icon

A small icon often displayed next to the value as a visual affordance for the fact it can be open. By default renders ▼ but you can use your own icon via `asChild` or use `children`.

| Prop                                                                                                                                                                    | Type      | Default |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
| `asChild`Render through a single-target factory, merging props and behavior with the chosen host. Read our [Composition](../guides/composition) guide for more details. | `boolean` | `false` |

### Portal

When used, portals the content part into the `body`.

| Prop                                                                                                                                                                                                         | Type          | Default         |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- | --------------- |
| `forceMount`Used to force mounting when more control is needed. Useful when controlling animation with Solid-compatible animation libraries. If used on this part, it will be inherited by `Select.Content`. | `boolean`     | —               |
| `container`Specify a container element to portal the content into.                                                                                                                                           | `HTMLElement` | `document.body` |

### Content

The component that pops out when the select is open.

| Prop                                                                                                                                                                                                                                                                                 | Type                | Default          |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------- | ---------------- |
| `asChild`Render through a single-target factory, merging props and behavior with the chosen host. Read our [Composition](../guides/composition) guide for more details.                                                                                                              | `boolean`           | `false`          |
| `forceMount`Used to force mounting when more control is needed. Useful when controlling animation with Solid-compatible animation libraries. It inherits from `Select.Portal`.                                                                                                       | `boolean`           | —                |
| `onCloseAutoFocus`Event handler called when focus moves to the trigger after closing. It can be prevented by calling `event.preventDefault`.                                                                                                                                         | `function`          | —                |
| `onEscapeKeyDown`Event handler called when the escape key is down. It can be prevented by calling `event.preventDefault`.                                                                                                                                                            | `function`          | —                |
| `onPointerDownOutside`Event handler called when a pointer event occurs outside the bounds of the component. It can be prevented by calling `event.preventDefault`.                                                                                                                   | `function`          | —                |
| `position`The positioning mode to use, `item-aligned` is the default and behaves similarly to a native MacOS menu by positioning content relative to the active item. `popper` positions content in the same way as our other primitives, for example `Popover` or `DropdownMenu`.   | `enum`              | `"item-aligned"` |
| `side`The preferred side of the anchor to render against when open. Will be reversed when collisions occur and `avoidCollisions` is enabled. Only available when `position` is set to `popper`.                                                                                      | `enum`              | `"bottom"`       |
| `sideOffset`The distance in pixels from the anchor. Only available when `position` is set to `popper`.                                                                                                                                                                               | `number`            | `0`              |
| `align`The preferred alignment against the anchor. May change when collisions occur. Only available when `position` is set to `popper`.                                                                                                                                              | `enum`              | `"start"`        |
| `alignOffset`An offset in pixels from the `"start"` or `"end"` alignment options. Only available when `position` is set to `popper`.                                                                                                                                                 | `number`            | `0`              |
| `avoidCollisions`When `true`, overrides the `side` and`align` preferences to prevent collisions with boundary edges. Only available when `position` is set to `popper`.                                                                                                              | `boolean`           | `true`           |
| `collisionBoundary`The element used as the collision boundary. By default this is the viewport, though you can provide additional element(s) to be included in this check. Only available when `position` is set to `popper`.                                                        | `Boundary`          | `[]`             |
| `collisionPadding`The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: `{ top: 20, left: 20 }`. Only available when `position` is set to `popper`.                | `number \| Padding` | `10`             |
| `arrowPadding`The padding between the arrow and the edges of the content. If your content has `border-radius`, this will prevent it from overflowing the corners. Only available when `position` is set to `popper`.                                                                 | `number`            | `0`              |
| `sticky`The sticky behavior on the align axis. `"partial"` will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst `"always"` will keep the content in the boundary regardless. Only available when `position` is set to `popper`. | `enum`              | `"partial"`      |
| `hideWhenDetached`Whether to hide the content when the trigger becomes fully occluded. Only available when `position` is set to `popper`.                                                                                                                                            | `boolean`           | `false`          |

| Data attribute | Values                                   |
| -------------- | ---------------------------------------- |
| `[data-state]` | `"open" \| "closed"`                     |
| `[data-side]`  | `"left" \| "right" \| "bottom" \| "top"` |
| `[data-align]` | `"start" \| "end" \| "center"`           |

| CSS Variable                              | Description                                                                                                          |
| ----------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
| `--radix-select-content-transform-origin` | The `transform-origin` computed from the content and arrow positions/offsets. Only present when `position="popper"`. |
| `--radix-select-content-available-width`  | The remaining width between the trigger and the boundary edge. Only present when `position="popper"`.                |
| `--radix-select-content-available-height` | The remaining height between the trigger and the boundary edge. Only present when `position="popper"`.               |
| `--radix-select-trigger-width`            | The width of the trigger. Only present when `position="popper"`.                                                     |
| `--radix-select-trigger-height`           | The height of the trigger. Only present when `position="popper"`.                                                    |

### Viewport

The scrolling viewport that contains all of the items.

| Prop                                                                                                                                                                    | Type      | Default |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
| `asChild`Render through a single-target factory, merging props and behavior with the chosen host. Read our [Composition](../guides/composition) guide for more details. | `boolean` | `false` |

### Item

The component that contains the select items.

| Prop                                                                                                                                                                                                                             | Type      | Default |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
| `asChild`Render through a single-target factory, merging props and behavior with the chosen host. Read our [Composition](../guides/composition) guide for more details.                                                          | `boolean` | `false` |
| `value*`The value given as data when submitted with a `name`.                                                                                                                                                                    | `string`  | —       |
| `disabled`When `true`, prevents the user from interacting with the item.                                                                                                                                                         | `boolean` | —       |
| `textValue`Optional text used for typeahead purposes. By default the typeahead behavior will use the `.textContent` of the `Select.ItemText` part. Use this when the content is complex, or you have non-textual content inside. | `string`  | —       |

| Data attribute       | Values                     |
| -------------------- | -------------------------- |
| `[data-state]`       | `"checked" \| "unchecked"` |
| `[data-highlighted]` | Present when highlighted   |
| `[data-disabled]`    | Present when disabled      |

### ItemText

The textual part of the item. It should only contain the text you want to see in the trigger when that item is selected. It should not be styled to ensure correct positioning.

| Prop                                                                                                                                                                    | Type      | Default |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
| `asChild`Render through a single-target factory, merging props and behavior with the chosen host. Read our [Composition](../guides/composition) guide for more details. | `boolean` | `false` |

### ItemIndicator

Renders when the item is selected. You can style this element directly, or you can use it as a wrapper to put an icon into, or both.

| Prop                                                                                                                                                                    | Type      | Default |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
| `asChild`Render through a single-target factory, merging props and behavior with the chosen host. Read our [Composition](../guides/composition) guide for more details. | `boolean` | `false` |

### ScrollUpButton

An optional button used as an affordance to show the viewport overflow as well as functionally enable scrolling upwards.

| Prop                                                                                                                                                                    | Type      | Default |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
| `asChild`Render through a single-target factory, merging props and behavior with the chosen host. Read our [Composition](../guides/composition) guide for more details. | `boolean` | `false` |

### ScrollDownButton

An optional button used as an affordance to show the viewport overflow as well as functionally enable scrolling downwards.

| Prop                                                                                                                                                                    | Type      | Default |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
| `asChild`Render through a single-target factory, merging props and behavior with the chosen host. Read our [Composition](../guides/composition) guide for more details. | `boolean` | `false` |

### Group

Used to group multiple items. use in conjunction with `Select.Label` to ensure good accessibility via automatic labelling.

| Prop                                                                                                                                                                    | Type      | Default |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
| `asChild`Render through a single-target factory, merging props and behavior with the chosen host. Read our [Composition](../guides/composition) guide for more details. | `boolean` | `false` |

### Label

Used to render the label of a group. It won't be focusable using arrow keys.

| Prop                                                                                                                                                                    | Type      | Default |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
| `asChild`Render through a single-target factory, merging props and behavior with the chosen host. Read our [Composition](../guides/composition) guide for more details. | `boolean` | `false` |

### Separator

Used to visually separate items in the select.

| Prop                                                                                                                                                                    | Type      | Default |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
| `asChild`Render through a single-target factory, merging props and behavior with the chosen host. Read our [Composition](../guides/composition) guide for more details. | `boolean` | `false` |

### Arrow

An optional arrow element to render alongside the content. This can be used to help visually link the trigger with the `Select.Content`. Must be rendered inside `Select.Content`. Only available when `position` is set to `popper`.

| Prop                                                                                                                                                                    | Type      | Default |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
| `asChild`Render through a single-target factory, merging props and behavior with the chosen host. Read our [Composition](../guides/composition) guide for more details. | `boolean` | `false` |
| `width`The width of the arrow in pixels.                                                                                                                                | `number`  | `10`    |
| `height`The height of the arrow in pixels.                                                                                                                              | `number`  | `5`     |

## Examples

### Change the positioning mode

By default, `Select` will behave similarly to a native MacOS menu by positioning `Select.Content` relative to the active item. If you would prefer an alternative positioning approach similar to `Popover` or `DropdownMenu` then you can set `position` to `popper` and make use of additional alignment options such as `side`, `sideOffset` and more.

```jsx
// index.tsx

import { Select } from "@radix-solid/primitives";

export default () => <Select.Root>

		<Select.Trigger>…</Select.Trigger>

		<Select.Portal>

			<Select.Content position="popper" sideOffset={5}>

				…

			</Select.Content>

		</Select.Portal>

	</Select.Root>;
```

### Constrain the content size

When using `position="popper"` on `Select.Content`, you may want to constrain the width of the content so that it matches the trigger width. You may also want to constrain its height to not exceed the viewport.

We expose several CSS custom properties such as `--radix-select-trigger-width` and `--radix-select-content-available-height` to support this. Use them to constrain the content dimensions.

```jsx
// index.tsx

import { Select } from "@radix-solid/primitives";

import "./styles.css";

export default () => <Select.Root>

		<Select.Trigger>…</Select.Trigger>

		<Select.Portal>

			<Select.Content class="SelectContent" position="popper" sideOffset={5}>

				…

			</Select.Content>

		</Select.Portal>

	</Select.Root>;
```

```css
/* styles.css */

.SelectContent {

	width: var(--radix-select-trigger-width);

	max-height: var(--radix-select-content-available-height);

}
```

### With disabled items

You can add special styles to disabled items via the `data-disabled` attribute.

```jsx
// index.tsx

import { Select } from "@radix-solid/primitives";

import "./styles.css";

export default () => <Select.Root>

		<Select.Trigger>…</Select.Trigger>

		<Select.Portal>

			<Select.Content>

				<Select.Viewport>

					<Select.Item value="disabled" class="SelectItem" disabled>

						…

					</Select.Item>

					<Select.Item value="first">…</Select.Item>

					<Select.Item value="second">…</Select.Item>

				</Select.Viewport>

			</Select.Content>

		</Select.Portal>

	</Select.Root>;
```

```css
/* styles.css */

.SelectItem[data-disabled] {

	color: "gainsboro";

}
```

### With a placeholder

You can use the `placeholder` prop on `Value` for when the select has no value. There's also a `data-placeholder` attribute on `Trigger` to help with styling.

```jsx
// index.tsx

import { Select } from "@radix-solid/primitives";

import "./styles.css";

export default () => <Select.Root>

		<Select.Trigger class="SelectTrigger">

			<Select.Value placeholder="Pick an option" />

			<Select.Icon />

		</Select.Trigger>

		<Select.Portal>

			<Select.Content>…</Select.Content>

		</Select.Portal>

	</Select.Root>;
```

```css
/* styles.css */

.SelectTrigger[data-placeholder] {

	color: "gainsboro";

}
```

### With separators

Use the `Separator` part to add a separator between items.

```jsx
<Select.Root>

	<Select.Trigger>…</Select.Trigger>

	<Select.Portal>

		<Select.Content>

			<Select.Viewport>

				<Select.Item value="first">…</Select.Item>

				<Select.Item value="second">…</Select.Item>

				<Select.Item value="third">…</Select.Item>

				<Select.Separator />

				<Select.Item value="fourth">…</Select.Item>

				<Select.Item value="fifth">…</Select.Item>

			</Select.Viewport>

		</Select.Content>

	</Select.Portal>

</Select.Root>
```

### With grouped items

Use the `Group` and `Label` parts to group items in a section.

```jsx
<Select.Root>

	<Select.Trigger>…</Select.Trigger>

	<Select.Portal>

		<Select.Content>

			<Select.Viewport>

				<Select.Group>

					<Select.Label>Label</Select.Label>

					<Select.Item value="first">…</Select.Item>

					<Select.Item value="second">…</Select.Item>

					<Select.Item value="third">…</Select.Item>

				</Select.Group>

			</Select.Viewport>

		</Select.Content>

	</Select.Portal>

</Select.Root>
```

### With complex items

You can use custom content in your items.

```jsx
import { Select } from "@radix-solid/primitives";

export default () => <Select.Root>

		<Select.Trigger>…</Select.Trigger>

		<Select.Portal>

			<Select.Content>

				<Select.Viewport>

					<Select.Item value="adolfo">

						<Select.ItemText>

							<img src="…" alt="" />

							Adolfo Hess

						</Select.ItemText>

						<Select.ItemIndicator>…</Select.ItemIndicator>

					</Select.Item>

					<Select.Item value="second">…</Select.Item>

					<Select.Item value="third">…</Select.Item>

				</Select.Viewport>

			</Select.Content>

		</Select.Portal>

	</Select.Root>;
```

### Controlling the value displayed in the trigger

By default the trigger will automatically display the selected item `ItemText`'s content. You can control what appears by chosing to put things inside/outside the `ItemText` part.

If you need more flexibility, you can control the component using `value`/`onValueChange` props and passing `children` to `SelectValue`. Remember to make sure what you put in there is accessible.

```jsx
import { createSignal } from "solid-js";

const countries = new Map([

  ["france", "🇫🇷"],

  ["united-kingdom", "🇬🇧"],

  ["spain", "🇪🇸"]

]);

export default () => {

  const [value, setValue] = createSignal("france");

  return <Select.Root value={value()} onValueChange={setValue}>

			<Select.Trigger>

				<Select.Value aria-label={value()}>

					{countries.get(value())}

				</Select.Value>

				<Select.Icon />

			</Select.Trigger>

			<Select.Portal>

			<Select.Content>

				<Select.Viewport>

					<Select.Item value="france">

						<Select.ItemText>France</Select.ItemText>

						<Select.ItemIndicator>…</Select.ItemIndicator>

					</Select.Item>

					<Select.Item value="united-kingdom">

						<Select.ItemText>United Kingdom</Select.ItemText>

						<Select.ItemIndicator>…</Select.ItemIndicator>

					</Select.Item>

					<Select.Item value="spain">

						<Select.ItemText>Spain</Select.ItemText>

						<Select.ItemIndicator>…</Select.ItemIndicator>

					</Select.Item>

				</Select.Viewport>

			</Select.Content>

			</Select.Portal>

		</Select.Root>;

};
```

### With custom scrollbar

The native scrollbar is hidden by default as we recommend using the `ScrollUpButton` and `ScrollDownButton` parts for the best UX. If you do not want to use these parts, compose your select with our [Scroll Area](scroll-area) primitive.

```jsx
// index.tsx

import { Select, ScrollArea } from "@radix-solid/primitives";

import "./styles.css";

export default () => <Select.Root>

		<Select.Trigger>…</Select.Trigger>

		<Select.Portal>

			<Select.Content>

				<ScrollArea.Root class="ScrollAreaRoot" type="auto">

					<Select.Viewport asChild>{target => target(ScrollArea.Viewport, {

            "class": "ScrollAreaViewport",

            children: <>

							<Select.Item value="first"><Select.ItemText>First item</Select.ItemText></Select.Item>

							<Select.Item value="second"><Select.ItemText>Second item</Select.ItemText></Select.Item>

							<Select.Item value="third"><Select.ItemText>Third item</Select.ItemText></Select.Item>

						</>

          })}</Select.Viewport>

					<ScrollArea.Scrollbar class="ScrollAreaScrollbar" orientation="vertical">

						<ScrollArea.Thumb class="ScrollAreaThumb" />

					</ScrollArea.Scrollbar>

				</ScrollArea.Root>

			</Select.Content>

		</Select.Portal>

	</Select.Root>;
```

```css
/* styles.css */

.ScrollAreaRoot {

	width: 100%;

	height: 100%;

}



.ScrollAreaViewport {

	width: 100%;

	height: 100%;

}



.ScrollAreaScrollbar {

	width: 4px;

	padding: 5px 2px;

}



.ScrollAreaThumb {

	background: rgba(0, 0, 0, 0.3);

	border-radius: 3px;

}
```

### Decoupling the hidden input

By default, `Select.Root` renders a visually hidden `select` for form submission. To recompose, move, or exclude that element, you can build the select from its lower-level parts instead.

> **Important:** These parts are unstable and prefixed with `unstable_`, so their API may change in a future release.

- `Select.unstable_Provider` provides the select state and accepts the form-related and state props (`name`, `value`, `defaultValue`, `onValueChange`, etc.).
- `Select.unstable_BubbleInput` is the visually hidden `select` that `Select.Root` renders by default. Omit it when you don't need form submission.

```jsx
import { Select } from "@radix-solid/primitives";

export default () => <Select.unstable_Provider name="fruit">

		<Select.Trigger>

			<Select.Value placeholder="Pick an option" />

			<Select.Icon />

		</Select.Trigger>

		<Select.Portal>

			<Select.Content>{/* Your content */}</Select.Content>

		</Select.Portal>

		<Select.unstable_BubbleInput />

	</Select.unstable_Provider>;
```

## Accessibility

Adheres to the [ListBox WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/listbox).

See the W3C [Select-Only Combobox](https://www.w3.org/TR/wai-aria-practices/examples/combobox/combobox-select-only.html) example for more information.

### Keyboard Interactions

| Key         | Description                                                                                                                            |
| ----------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| `Space`     | When focus is on `Select.Trigger`, opens the select and focuses the selected item. When focus is on an item, selects the focused item. |
| `Enter`     | When focus is on `Select.Trigger`, opens the select and focuses the first item. When focus is on an item, selects the focused item.    |
| `ArrowDown` | When focus is on `Select.Trigger`, opens the select. When focus is on an item, moves focus to the next item.                           |
| `ArrowUp`   | When focus is on `Select.Trigger`, opens the select. When focus is on an item, moves focus to the previous item.                       |
| `Esc`       | Closes the select and moves focus to `Select.Trigger`.                                                                                 |

### Labelling

Use our [Label](label) component in order to offer a visual and accessible label for the select.

```jsx
import { Select, Label } from "@radix-solid/primitives";

export default () => <>

		<Label.Root>

			Country

			<Select.Root>…</Select.Root>

		</Label.Root>



		{/* or */}



		<Label.Root for="country">Country</Label.Root>

		<Select.Root>

			<Select.Trigger id="country">…</Select.Trigger>

			<Select.Portal>

				<Select.Content>…</Select.Content>

			</Select.Portal>

		</Select.Root>

	</>;
```

## Custom APIs

Create your own API by abstracting the primitive parts into your own component.

### Abstract down to `Select` and `SelectItem`

This example abstracts most of the parts.

#### Usage

```jsx
import { Select, SelectItem } from "./your-select";

export default () => <Select defaultValue="2">

		<SelectItem value="1">Item 1</SelectItem>

		<SelectItem value="2">Item 2</SelectItem>

		<SelectItem value="3">Item 3</SelectItem>

	</Select>;
```

#### Implementation

```jsx
import { omit, type ComponentProps } from "solid-js";

// your-select.tsx



import { Select as SelectPrimitive } from "@radix-solid/primitives";

import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "@radix-solid/icons";

export const Select = (p: ComponentProps<typeof SelectPrimitive.Root> &

  Pick<ComponentProps<typeof SelectPrimitive.Trigger>, "ref" | "class">) => {

  return <SelectPrimitive.Root {...omit(p, "children", "class", "ref")}>

				<SelectPrimitive.Trigger ref={p.ref} class={p.class}>

					<SelectPrimitive.Value />

					<SelectPrimitive.Icon>

						<ChevronDownIcon />

					</SelectPrimitive.Icon>

				</SelectPrimitive.Trigger>

				<SelectPrimitive.Portal>

					<SelectPrimitive.Content>

						<SelectPrimitive.ScrollUpButton>

							<ChevronUpIcon />

						</SelectPrimitive.ScrollUpButton>

						<SelectPrimitive.Viewport>{p.children}</SelectPrimitive.Viewport>

						<SelectPrimitive.ScrollDownButton>

							<ChevronDownIcon />

						</SelectPrimitive.ScrollDownButton>

					</SelectPrimitive.Content>

				</SelectPrimitive.Portal>

			</SelectPrimitive.Root>;

};

export const SelectItem = (p: Extract<ComponentProps<typeof SelectPrimitive.Item>, {

  asChild?: false;

}>) => {

  return <SelectPrimitive.Item {...omit(p, "children", "class")} ref={p.ref}>

				<SelectPrimitive.ItemText>{p.children}</SelectPrimitive.ItemText>

				<SelectPrimitive.ItemIndicator>

					<CheckIcon />

				</SelectPrimitive.ItemIndicator>

			</SelectPrimitive.Item>;

};
```