---
title: Select
description: Displays a list of options for the user to pick from, triggered by a button.
---

```templ
package examples

import selectcomp "github.com/axadrn/shadcn-templ/v2/components/select"

templ SelectDemo() {
	@selectcomp.Select() {
		@selectcomp.Trigger(selectcomp.TriggerProps{Class: "w-full max-w-48"}) {
			@selectcomp.Value(selectcomp.ValueProps{Placeholder: "Select a fruit"})
		}
		@selectcomp.Content() {
			@selectcomp.Group() {
				@selectcomp.Label() {
					Fruits
				}
				@selectcomp.Item(selectcomp.ItemProps{Value: "apple"}) {
					Apple
				}
				@selectcomp.Item(selectcomp.ItemProps{Value: "banana"}) {
					Banana
				}
				@selectcomp.Item(selectcomp.ItemProps{Value: "blueberry"}) {
					Blueberry
				}
				@selectcomp.Item(selectcomp.ItemProps{Value: "grapes"}) {
					Grapes
				}
				@selectcomp.Item(selectcomp.ItemProps{Value: "pineapple"}) {
					Pineapple
				}
			}
		}
	}
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
shadcn-templ add select
```

</TabsContent>

<TabsContent value="manual">

<Steps className="mb-0 pt-2">

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="select" title="components/select/select.templ" />

<ComponentSource name="select" title="components/select/select.js" />

<ComponentSource name="select" title="components/floatingui/floating_ui_core.js" />

<ComponentSource name="select" title="components/floatingui/floating_ui_dom.js" />

Component scripts are loaded through the shared script bundle, see [JavaScript](/docs/installation#javascript).

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```go showLineNumbers
import selectcomp "github.com/axadrn/shadcn-templ/v2/components/select"
```

```templ showLineNumbers
@selectcomp.Select() {
	@selectcomp.Trigger(selectcomp.TriggerProps{Class: "w-[180px]"}) {
		@selectcomp.Value(selectcomp.ValueProps{Placeholder: "Theme"})
	}
	@selectcomp.Content() {
		@selectcomp.Group() {
			@selectcomp.Item(selectcomp.ItemProps{Value: "light"}) {
				Light
			}
			@selectcomp.Item(selectcomp.ItemProps{Value: "dark"}) {
				Dark
			}
			@selectcomp.Item(selectcomp.ItemProps{Value: "system"}) {
				System
			}
		}
	}
}
```

## Composition

Use the following composition to build a `Select`:

```text
selectcomp.Select
├── selectcomp.Trigger
│   └── selectcomp.Value
└── selectcomp.Content
    ├── selectcomp.Group
    │   ├── selectcomp.Label
    │   ├── selectcomp.Item
    │   └── selectcomp.Item
    ├── selectcomp.Separator
    └── selectcomp.Group
        ├── selectcomp.Label
        ├── selectcomp.Item
        └── selectcomp.Item
```

## Align Item With Trigger

By default the popup positions so the selected item appears over the trigger (Base UI's `alignItemWithTrigger`). Set `DisableAlignItemWithTrigger` on `selectcomp.Content` to open it below the trigger edge like a dropdown instead.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/field"
	selectcomp "github.com/axadrn/shadcn-templ/v2/components/select"
	switchcomp "github.com/axadrn/shadcn-templ/v2/components/switch"
)

templ SelectAlignItem() {
	@field.Group(field.GroupProps{Class: "w-full max-w-xs"}) {
		@field.Field(field.Props{Orientation: field.OrientationHorizontal}) {
			@field.Content() {
				@field.Label(field.LabelProps{For: "align-item-switch"}) {
					Align Item
				}
				@field.Description() {
					Toggle to align the item with the trigger.
				}
			}
			@switchcomp.Switch(switchcomp.Props{
				ID:      "align-item-switch",
				Checked: true,
			})
		}
		@field.Field() {
			@selectcomp.Select(selectcomp.Props{
				ID:    "align-item-select",
				Value: "banana",
			}) {
				@selectcomp.Trigger() {
					@selectcomp.Value()
				}
				@selectcomp.Content() {
					@selectcomp.Group() {
					@selectcomp.Item(selectcomp.ItemProps{Value: "apple"}) {
						Apple
					}
					@selectcomp.Item(selectcomp.ItemProps{Value: "banana"}) {
						Banana
					}
					@selectcomp.Item(selectcomp.ItemProps{Value: "blueberry"}) {
						Blueberry
					}
					@selectcomp.Item(selectcomp.ItemProps{Value: "grapes"}) {
						Grapes
					}
					@selectcomp.Item(selectcomp.ItemProps{Value: "pineapple"}) {
						Pineapple
					}
				}
				}
			}
		}
	}
	<script nonce={ templ.GetNonce(ctx) }>
		(() => {
			const sw = document.getElementById("align-item-switch");
			if (!sw) return;
			sw.addEventListener("change", () => {
				// Looked up on toggle: the content is portaled to <body> at init.
				const content = document.getElementById("align-item-select");
				if (!content) return;
				content.setAttribute("data-tui-select-position", sw.checked ? "item-aligned" : "popper");
			});
		})();
	</script>
}
```

## Groups

Use `selectcomp.Group`, `selectcomp.Label`, and `selectcomp.Separator` to organize items.

```templ
package examples

import selectcomp "github.com/axadrn/shadcn-templ/v2/components/select"

templ SelectGroupsExample() {
	@selectcomp.Select() {
		@selectcomp.Trigger(selectcomp.TriggerProps{Class: "w-full max-w-48"}) {
			@selectcomp.Value(selectcomp.ValueProps{Placeholder: "Select a fruit"})
		}
		@selectcomp.Content() {
			@selectcomp.Group() {
				@selectcomp.Label() {
					Fruits
				}
				@selectcomp.Item(selectcomp.ItemProps{Value: "apple"}) {
					Apple
				}
				@selectcomp.Item(selectcomp.ItemProps{Value: "banana"}) {
					Banana
				}
				@selectcomp.Item(selectcomp.ItemProps{Value: "blueberry"}) {
					Blueberry
				}
			}
			@selectcomp.Separator()
			@selectcomp.Group() {
				@selectcomp.Label() {
					Vegetables
				}
				@selectcomp.Item(selectcomp.ItemProps{Value: "carrot"}) {
					Carrot
				}
				@selectcomp.Item(selectcomp.ItemProps{Value: "broccoli"}) {
					Broccoli
				}
				@selectcomp.Item(selectcomp.ItemProps{Value: "spinach"}) {
					Spinach
				}
			}
		}
	}
}
```

## Scrollable

A select with many items that scrolls.

```templ
package examples

import selectcomp "github.com/axadrn/shadcn-templ/v2/components/select"

templ SelectScrollable() {
	@selectcomp.Select() {
		@selectcomp.Trigger(selectcomp.TriggerProps{Class: "w-full max-w-64"}) {
			@selectcomp.Value(selectcomp.ValueProps{Placeholder: "Select a timezone"})
		}
		@selectcomp.Content() {
			@selectcomp.Group() {
				@selectcomp.Label() {
					North America
				}
				@selectcomp.Item(selectcomp.ItemProps{Value: "est"}) {
					Eastern Standard Time
				}
				@selectcomp.Item(selectcomp.ItemProps{Value: "cst"}) {
					Central Standard Time
				}
				@selectcomp.Item(selectcomp.ItemProps{Value: "mst"}) {
					Mountain Standard Time
				}
				@selectcomp.Item(selectcomp.ItemProps{Value: "pst"}) {
					Pacific Standard Time
				}
				@selectcomp.Item(selectcomp.ItemProps{Value: "akst"}) {
					Alaska Standard Time
				}
				@selectcomp.Item(selectcomp.ItemProps{Value: "hst"}) {
					Hawaii Standard Time
				}
			}
			@selectcomp.Group() {
				@selectcomp.Label() {
					Europe & Africa
				}
				@selectcomp.Item(selectcomp.ItemProps{Value: "gmt"}) {
					Greenwich Mean Time
				}
				@selectcomp.Item(selectcomp.ItemProps{Value: "cet"}) {
					Central European Time
				}
				@selectcomp.Item(selectcomp.ItemProps{Value: "eet"}) {
					Eastern European Time
				}
				@selectcomp.Item(selectcomp.ItemProps{Value: "west"}) {
					Western European Summer Time
				}
				@selectcomp.Item(selectcomp.ItemProps{Value: "cat"}) {
					Central Africa Time
				}
				@selectcomp.Item(selectcomp.ItemProps{Value: "eat"}) {
					East Africa Time
				}
			}
			@selectcomp.Group() {
				@selectcomp.Label() {
					Asia
				}
				@selectcomp.Item(selectcomp.ItemProps{Value: "msk"}) {
					Moscow Time
				}
				@selectcomp.Item(selectcomp.ItemProps{Value: "ist"}) {
					India Standard Time
				}
				@selectcomp.Item(selectcomp.ItemProps{Value: "cst_china"}) {
					China Standard Time
				}
				@selectcomp.Item(selectcomp.ItemProps{Value: "jst"}) {
					Japan Standard Time
				}
				@selectcomp.Item(selectcomp.ItemProps{Value: "kst"}) {
					Korea Standard Time
				}
				@selectcomp.Item(selectcomp.ItemProps{Value: "ist_indonesia"}) {
					Indonesia Central Standard Time
				}
			}
			@selectcomp.Group() {
				@selectcomp.Label() {
					Australia & Pacific
				}
				@selectcomp.Item(selectcomp.ItemProps{Value: "awst"}) {
					Australian Western Standard Time
				}
				@selectcomp.Item(selectcomp.ItemProps{Value: "acst"}) {
					Australian Central Standard Time
				}
				@selectcomp.Item(selectcomp.ItemProps{Value: "aest"}) {
					Australian Eastern Standard Time
				}
				@selectcomp.Item(selectcomp.ItemProps{Value: "nzst"}) {
					New Zealand Standard Time
				}
				@selectcomp.Item(selectcomp.ItemProps{Value: "fjt"}) {
					Fiji Time
				}
			}
			@selectcomp.Group() {
				@selectcomp.Label() {
					South America
				}
				@selectcomp.Item(selectcomp.ItemProps{Value: "art"}) {
					Argentina Time
				}
				@selectcomp.Item(selectcomp.ItemProps{Value: "bot"}) {
					Bolivia Time
				}
				@selectcomp.Item(selectcomp.ItemProps{Value: "brt"}) {
					Brasilia Time
				}
				@selectcomp.Item(selectcomp.ItemProps{Value: "clt"}) {
					Chile Standard Time
				}
			}
		}
	}
}
```

## Disabled

```templ
package examples

import selectcomp "github.com/axadrn/shadcn-templ/v2/components/select"

templ SelectDisabled() {
	@selectcomp.Select(selectcomp.Props{Disabled: true}) {
		@selectcomp.Trigger(selectcomp.TriggerProps{Class: "w-full max-w-48"}) {
			@selectcomp.Value(selectcomp.ValueProps{Placeholder: "Select a fruit"})
		}
		@selectcomp.Content() {
			@selectcomp.Group() {
				@selectcomp.Item(selectcomp.ItemProps{Value: "apple"}) {
					Apple
				}
				@selectcomp.Item(selectcomp.ItemProps{Value: "banana"}) {
					Banana
				}
				@selectcomp.Item(selectcomp.ItemProps{Value: "blueberry"}) {
					Blueberry
				}
				@selectcomp.Item(selectcomp.ItemProps{Value: "grapes", Disabled: true}) {
					Grapes
				}
				@selectcomp.Item(selectcomp.ItemProps{Value: "pineapple"}) {
					Pineapple
				}
			}
		}
	}
}
```

## Invalid

Set the `Invalid` prop on the `field.Field` component and `aria-invalid` on the `selectcomp.Trigger` component to show an error state.

```templ showLineNumbers /aria-invalid/
@field.Field(field.Props{Attributes: templ.Attributes{"data-invalid": "true"}}) {
	@field.Label() {
		Fruit
	}
	@selectcomp.Trigger(selectcomp.TriggerProps{Attributes: templ.Attributes{"aria-invalid": "true"}}) {
		@selectcomp.Value()
	}
}
```

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/field"
	selectcomp "github.com/axadrn/shadcn-templ/v2/components/select"
)

templ SelectInvalid() {
	@field.Field(field.Props{ Class: "w-full max-w-48", Attributes: templ.Attributes{"data-invalid": "true"}}) {
		@field.Label() {
			Fruit
		}
		@selectcomp.Select() {
			@selectcomp.Trigger(selectcomp.TriggerProps{Attributes: templ.Attributes{"aria-invalid": "true"}}) {
				@selectcomp.Value(selectcomp.ValueProps{Placeholder: "Select a fruit"})
			}
			@selectcomp.Content() {
				@selectcomp.Group() {
					@selectcomp.Item(selectcomp.ItemProps{Value: "apple"}) {
						Apple
					}
					@selectcomp.Item(selectcomp.ItemProps{Value: "banana"}) {
						Banana
					}
					@selectcomp.Item(selectcomp.ItemProps{Value: "blueberry"}) {
						Blueberry
					}
				}
			}
		}
		@field.Error() {
			Please select a fruit.
		}
	}
}
```

## API Reference

### Select

The `selectcomp.Select` component is the root that carries the selection and the form value.

| Prop       | Type     | Default |
| ---------- | -------- | ------- |
| `Name`     | `string` | -       |
| `Value`    | `string` | -       |
| `Disabled` | `bool`   | `false` |

### SelectTrigger

The `selectcomp.Trigger` component is the button that opens the listbox.

| Prop      | Type                       | Default       |
| --------- | -------------------------- | ------------- |
| `Size`    | `SizeDefault \| SizeSm`    | `SizeDefault` |
| `Class`   | `string`                   | -             |

### SelectValue

The `selectcomp.Value` component shows the selected label inside the trigger.

| Prop          | Type     | Default |
| ------------- | -------- | ------- |
| `Placeholder` | `string` | -       |
| `Class`       | `string` | -       |

### SelectContent

The `selectcomp.Content` component is the listbox popup.

| Prop       | Type                                       | Default               |
| ---------- | ------------------------------------------ | --------------------- |
| `DisableAlignItemWithTrigger` | `bool` | `false` |
| `Align`    | `AlignStart \| AlignCenter \| AlignEnd`    | `AlignCenter`         |
| `Class`    | `string`                                   | -                     |

### SelectGroup

The `selectcomp.Group` component wraps related items.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `Class` | `string` | -       |

### SelectLabel

The `selectcomp.Label` component titles a group.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `Class` | `string` | -       |

### SelectItem

The `selectcomp.Item` component is a selectable option.

| Prop       | Type     | Default |
| ---------- | -------- | ------- |
| `Value`    | `string` | -       |
| `Label`    | `string` | -       |
| `Disabled` | `bool`   | `false` |
| `Class`    | `string` | -       |

### SelectSeparator

The `selectcomp.Separator` component divides groups.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `Class` | `string` | -       |