Select - HapplyUI

A select component with multiple variants, sizes, scroll area, and item icons.

Installation

bunx @happlyui/cli@latest add select

Dependencies

npm packages

@radix-ui/react-select
@radix-ui/react-scroll-area
@radix-ui/react-slot
@remixicon/react

Registry dependencies

These are automatically installed when you add this component.

form-field-context
use-form-field-binding
happly-ui-utils
polymorphic
tv

Usage

import * as Select from "@/components/ui/select"

<Select.Root>
  <Select.Trigger>
    <Select.Value placeholder="Select..." />
  </Select.Trigger>
  <Select.Content>
    <Select.Item value="one">Option One</Select.Item>
    <Select.Item value="two">Option Two</Select.Item>
  </Select.Content>
</Select.Root>

Examples

Default

Basic select with text options.

<Select.Root>
  <Select.Trigger>
    <Select.Value placeholder="Select your favorite fruit..." />
  </Select.Trigger>
  <Select.Content>
    <Select.Item value="apple">Apple</Select.Item>
    <Select.Item value="banana">Banana</Select.Item>
  </Select.Content>
</Select.Root>

With Label and Hint

Select with a label and hint text.

Fruit

This is a hint text to help user.

<FormField.Root
  label="Fruit"
  htmlFor="fruit"
  hint="This is a hint text to help user."
>
  <Select.Root>
    <Select.Trigger id="fruit">
      <Select.Value placeholder="Select your favorite fruit..." />
    </Select.Trigger>
    <Select.Content>
      <Select.Item value="apple">Apple</Select.Item>
      <Select.Item value="banana">Banana</Select.Item>
    </Select.Content>
  </Select.Root>
</FormField.Root>

With Icons

Select items with leading icons.

<Select.Root defaultValue="utility-payment">
  <Select.Trigger>
    <Select.Value placeholder="Select a payment..." />
  </Select.Trigger>
  <Select.Content>
    <Select.Item value="utility-payment">
      <Select.ItemIcon as={RiFlashlightLine} />
      Utility Payment
    </Select.Item>
  </Select.Content>
</Select.Root>

Sizes

Medium, small, and xsmall size variants.

<Select.Root size="medium">...</Select.Root>
<Select.Root size="small">...</Select.Root>
<Select.Root size="xsmall">...</Select.Root>

With Country Flags

Select items with background-image flag icons.

<Select.Item value="us">
  <Select.ItemIcon style={{ backgroundImage: 'url(/flags/US.svg)' }} />
  United States
</Select.Item>

With Users

Select items with avatars and user details.

<Select.Item value="sophia">
  <Select.ItemIcon as={Avatar.Root} size="20" color="yellow">
    <Avatar.Image src="/avatar.png" />
  </Select.ItemIcon>
  Sophia Williams
</Select.Item>

Disabled

Disabled select states with placeholder and filled values.

<Select.Root disabled>
  <Select.Trigger>
    <Select.Value placeholder="Select..." />
  </Select.Trigger>
  <Select.Content>...</Select.Content>
</Select.Root>

Compact

Compact variant with auto-width trigger.

<Select.Root variant="compact" defaultValue="25">
  <Select.Trigger>
    <Select.Value />
  </Select.Trigger>
  <Select.Content align="center">
    <Select.Item value="25">25</Select.Item>
  </Select.Content>
</Select.Root>

Compact with Country Flags

Compact select showing only icon in trigger.

<Select.Root variant="compact">
  <Select.Trigger>
    <Select.Value placeholder={<Select.TriggerIcon as={RiGlobalLine} />} />
  </Select.Trigger>
  <Select.Content align="center">...</Select.Content>
</Select.Root>

Compact Sizes

All compact sizes with icons and text.

<Select.Root variant="compact" size="medium">...</Select.Root>
<Select.Root variant="compact" size="small">...</Select.Root>
<Select.Root variant="compact" size="xsmall">...</Select.Root>

Inline

Inline variant for embedding within text or controls.

<Select.Root variant="inline">
  <Select.Trigger>
    <Select.Value placeholder="Select" />
  </Select.Trigger>
  <Select.Content>...</Select.Content>
</Select.Root>

Input with Inline Select

Inline select inside an input wrapper.

<Input.Root>
  <Input.Wrapper>
    <Input.Input placeholder="Placeholder..." />
    <Select.Root variant="inline" defaultValue="view">
      <Select.Trigger>
        <Select.Value />
      </Select.Trigger>
      <Select.Content>...</Select.Content>
    </Select.Root>
  </Input.Wrapper>
</Input.Root>

With Input (compactForInput)

CompactForInput variant as an input affix.

€

<Input.Root>
  <Input.Wrapper>
    <Input.InlineAffix>&euro;</Input.InlineAffix>
    <Input.Input placeholder="0.00" />
  </Input.Wrapper>
  <Select.Root variant="compactForInput" defaultValue="EUR">
    <Select.Trigger>
      <Select.Value />
    </Select.Trigger>
    <Select.Content>...</Select.Content>
  </Select.Root>
</Input.Root>

With Input Sizes

CompactForInput across medium, small, and xsmall input sizes.

€

<Input.Root size="medium">
  <Input.Wrapper>...</Input.Wrapper>
  <Select.Root variant="compactForInput" size="medium">...</Select.Root>
</Input.Root>

API Reference

Select.Root

The root select container. Provides context for variant, size, and error state.

Prop	Type	Default	Description
`variant`	`'default' \| 'compact' \| 'compactForInput' \| 'inline'`	`'default'`	Display variant
`size`	`'medium' \| 'small' \| 'xsmall'`	`'medium'`	Size variant
`hasError`	`boolean`	`false`	Show error styling

Select.Trigger

The trigger button with auto arrow icon.

Prop	Type	Default	Description

Select.Value

Displays the selected value or placeholder.

Prop	Type	Default	Description
`placeholder`	`ReactNode`	-	Placeholder content when no value is selected (can be text or JSX)

Select.Content

The dropdown content with scroll area.

Prop	Type	Default	Description

Select.Item

An individual select option with check indicator.

Prop	Type	Default	Description
`value`	`string`	-	The value of this item

Select.ItemIcon

Icon displayed in a select item. Polymorphic — use `as` to render a custom component.

Prop	Type	Default	Description
`as`	`React.ElementType`	-	The icon component to render

Select.TriggerIcon

Icon displayed inside the trigger. Polymorphic — use `as` to render a custom component.

Prop	Type	Default	Description
`as`	`React.ElementType`	-	The icon component to render

Select.Group

Groups related items together. Wraps Radix Select.Group.

Prop	Type	Default	Description

Select.GroupLabel

Label for a group of items. Wraps Radix Select.Label.

Prop	Type	Default	Description

Select.Separator

Visual separator between items or groups. Wraps Radix Select.Separator.

Prop	Type	Default	Description