Themes

Advanced

Utils

Select

사용자가 선택할 수 있는 옵션 목록을 표시합니다—버튼으로 트리거됩니다.

View source Report an issue View in Playground

<Select.Root defaultValue="apple">
	<Select.Trigger />
	<Select.Content>
		<Select.Group>
			<Select.Label>Fruits</Select.Label>
			<Select.Item value="orange">Orange</Select.Item>
			<Select.Item value="apple">Apple</Select.Item>
			<Select.Item value="grape" disabled>
				Grape
			</Select.Item>
		</Select.Group>
		<Select.Separator />
		<Select.Group>
			<Select.Label>Vegetables</Select.Label>
			<Select.Item value="carrot">Carrot</Select.Item>
			<Select.Item value="potato">Potato</Select.Item>
		</Select.Group>
	</Select.Content>
</Select.Root>

API Reference

Root

모든 Select 요소를 포함합니다. Select.Root primitive 부분에서 props를 상속받습니다.

Prop	Type	Default
`size`	`Responsive<"1" \| "2" \| "3">`	`"2"`

Trigger

Select을 토글하는 버튼입니다. 이 컴포넌트는 primitive.Trigger primitive 및 Value 부분에서 props를 상속받습니다. common margin props을 지원합니다.

Prop	Type	Default
`variant`	`"classic" \| "surface" \| "soft" \| "ghost"`	`"surface"`
`color`	`enum`	No default value
`radius`	`"none" \| "small" \| "medium" \| "large" \| "full"`	No default value
`placeholder`	`string`	No default value

Content

Select이 열릴 때 나타나는 컴포넌트입니다. Select.Portal primitive 및 Select.Content primitive 부분에서 props를 상속받습니다.

Prop	Type	Default
`variant`	`"solid" \| "soft"`	`"solid"`
`color`	`enum`	No default value
`highContrast`	`boolean`	No default value

Item

Select 항목을 포함하는 컴포넌트입니다. Select.Item primitive 부분에서 props를 상속받습니다.

Group

여러 항목을 그룹화하는 데 사용됩니다. Select.Group primitive 부분에서 props를 상속받습니다. 자동 레이블링을 통해 접근성을 보장하기 위해 Select.Label과 함께 사용합니다.

Label

그룹의 레이블을 렌더링하는 데 사용되며, 화살표 키로 포커스할 수 없습니다. Select.Label primitive 부분에서 props를 상속받습니다.

Separator

Select에서 항목을 시각적으로 구분하는 데 사용됩니다. Select.Separator primitive 부분에서 props를 상속받습니다.

Examples

Size

size prop을 사용하여 크기를 조절합니다.

<Flex gap="3" align="center">
	<Select.Root size="1" defaultValue="apple">
		<Select.Trigger />
		<Select.Content>
			<Select.Item value="apple">Apple</Select.Item>
			<Select.Item value="orange">Orange</Select.Item>
		</Select.Content>
	</Select.Root>

	<Select.Root size="2" defaultValue="apple">
		<Select.Trigger />
		<Select.Content>
			<Select.Item value="apple">Apple</Select.Item>
			<Select.Item value="orange">Orange</Select.Item>
		</Select.Content>
	</Select.Root>

	<Select.Root size="3" defaultValue="apple">
		<Select.Trigger />
		<Select.Content>
			<Select.Item value="apple">Apple</Select.Item>
			<Select.Item value="orange">Orange</Select.Item>
		</Select.Content>
	</Select.Root>
</Flex>

Variant

Trigger 및 Content에서 variant prop을 사용하여 시각적 스타일을 사용자 정의합니다.

<Flex gap="3" align="center">
	<Select.Root defaultValue="apple">
		<Select.Trigger variant="surface" />
		<Select.Content>
			<Select.Item value="apple">Apple</Select.Item>
			<Select.Item value="orange">Orange</Select.Item>
		</Select.Content>
	</Select.Root>

	<Select.Root defaultValue="apple">
		<Select.Trigger variant="classic" />
		<Select.Content>
			<Select.Item value="apple">Apple</Select.Item>
			<Select.Item value="orange">Orange</Select.Item>
		</Select.Content>
	</Select.Root>

	<Select.Root defaultValue="apple">
		<Select.Trigger variant="soft" />
		<Select.Content>
			<Select.Item value="apple">Apple</Select.Item>
			<Select.Item value="orange">Orange</Select.Item>
		</Select.Content>
	</Select.Root>
</Flex>

Ghost

ghost 트리거 변형을 사용하여 시각적으로 포함된 요소 없이 트리거를 렌더링합니다. 고스트 트리거는 레이아웃에서 다르게 동작하며, 음수 여백을 사용하여 형제 요소와 광학적으로 정렬하면서 Padding된 활성 및 호버 상태를 유지합니다.

<Flex gap="3" align="center">
	<Select.Root defaultValue="apple">
		<Select.Trigger variant="surface" />
		<Select.Content>
			<Select.Item value="apple">Apple</Select.Item>
			<Select.Item value="orange">Orange</Select.Item>
		</Select.Content>
	</Select.Root>

	<Select.Root defaultValue="apple">
		<Select.Trigger variant="ghost" />
		<Select.Content>
			<Select.Item value="apple">Apple</Select.Item>
			<Select.Item value="orange">Orange</Select.Item>
		</Select.Content>
	</Select.Root>
</Flex>

Color

Trigger 및 Content에서 color prop을 사용하여 특정 색상 값을 지정합니다.

<Flex gap="3">
	<Select.Root defaultValue="apple">
		<Select.Trigger color="indigo" variant="soft" />
		<Select.Content color="indigo">
			<Select.Item value="apple">Apple</Select.Item>
			<Select.Item value="orange">Orange</Select.Item>
		</Select.Content>
	</Select.Root>

	<Select.Root defaultValue="apple">
		<Select.Trigger color="cyan" variant="soft" />
		<Select.Content color="cyan">
			<Select.Item value="apple">Apple</Select.Item>
			<Select.Item value="orange">Orange</Select.Item>
		</Select.Content>
	</Select.Root>

	<Select.Root defaultValue="apple">
		<Select.Trigger color="orange" variant="soft" />
		<Select.Content color="orange">
			<Select.Item value="apple">Apple</Select.Item>
			<Select.Item value="orange">Orange</Select.Item>
		</Select.Content>
	</Select.Root>

	<Select.Root defaultValue="apple">
		<Select.Trigger color="crimson" variant="soft" />
		<Select.Content color="crimson">
			<Select.Item value="apple">Apple</Select.Item>
			<Select.Item value="orange">Orange</Select.Item>
		</Select.Content>
	</Select.Root>
</Flex>

High-contrast

Content에서 highContrast prop을 사용하여 항목 대비를 높입니다.

<Flex gap="3">
	<Select.Root defaultValue="apple">
		<Select.Trigger color="gray" />
		<Select.Content color="gray" variant="solid">
			<Select.Item value="apple">Apple</Select.Item>
			<Select.Item value="orange">Orange</Select.Item>
		</Select.Content>
	</Select.Root>

	<Select.Root defaultValue="apple">
		<Select.Trigger color="gray" />
		<Select.Content color="gray" variant="solid" highContrast>
			<Select.Item value="apple">Apple</Select.Item>
			<Select.Item value="orange">Orange</Select.Item>
		</Select.Content>
	</Select.Root>
</Flex>

Radius

radius prop을 사용하여 특정 Radius 값을 지정합니다.

<Flex gap="3">
	<Select.Root defaultValue="apple">
		<Select.Trigger radius="none" />
		<Select.Content>
			<Select.Item value="apple">Apple</Select.Item>
			<Select.Item value="orange">Orange</Select.Item>
		</Select.Content>
	</Select.Root>

	<Select.Root defaultValue="apple">
		<Select.Trigger radius="large" />
		<Select.Content>
			<Select.Item value="apple">Apple</Select.Item>
			<Select.Item value="orange">Orange</Select.Item>
		</Select.Content>
	</Select.Root>

	<Select.Root defaultValue="apple">
		<Select.Trigger radius="full" />
		<Select.Content>
			<Select.Item value="apple">Apple</Select.Item>
			<Select.Item value="orange">Orange</Select.Item>
		</Select.Content>
	</Select.Root>
</Flex>

Placeholder

placeholder prop을 사용하여 초기 값이 필요 없는 Trigger를 생성합니다.

<Select.Root>
	<Select.Trigger placeholder="Pick a fruit" />
	<Select.Content>
		<Select.Group>
			<Select.Label>Fruits</Select.Label>
			<Select.Item value="orange">Orange</Select.Item>
			<Select.Item value="apple">Apple</Select.Item>
			<Select.Item value="grape" disabled>
				Grape
			</Select.Item>
		</Select.Group>
		<Select.Separator />
		<Select.Group>
			<Select.Label>Vegetables</Select.Label>
			<Select.Item value="carrot">Carrot</Select.Item>
			<Select.Item value="potato">Potato</Select.Item>
		</Select.Group>
	</Select.Content>
</Select.Root>

Position

position="popper" prop을 설정하여 Select 메뉴를 트리거 아래에 위치시킵니다.

<Select.Root defaultValue="apple">
	<Select.Trigger />
	<Select.Content position="popper">
		<Select.Item value="apple">Apple</Select.Item>
		<Select.Item value="orange">Orange</Select.Item>
	</Select.Content>
</Select.Root>

With SSR

서버 측 렌더링을 사용할 때, 수화 후 레이아웃 이동이 발생할 수 있습니다. 이는 Trigger가 선택된 항목의 텍스트를 표시하기 위해 클라이언트 측 코드를 실행하기 때문입니다. 이 레이아웃 이동을 피하려면 값을 매핑하여 수동으로 렌더링할 수 있습니다.

() => {
	const data = {
		apple: "Apple",
		orange: "Orange",
	};
	const [value, setValue] = React.useState("apple");
	return (
		<Select.Root value={value} onValueChange={setValue}>
			<Select.Trigger>{data[value]}</Select.Trigger>
			<Select.Content>
				<Select.Item value="apple">Apple</Select.Item>
				<Select.Item value="orange">Orange</Select.Item>
			</Select.Content>
		</Select.Root>
	);
};

With an icon

Trigger가 값을 렌더링하는 방식을 사용자 정의하여 선택된 항목의 텍스트 옆에 아이콘을 렌더링할 수 있습니다.

() => {
	const data = {
		light: { label: "Light", icon: <SunIcon /> },
		dark: { label: "Dark", icon: <MoonIcon /> },
	};
	const [value, setValue] = React.useState("light");
	return (
		<Flex direction="column" maxWidth="160px">
			<Select.Root value={value} onValueChange={setValue}>
				<Select.Trigger>
					<Flex as="span" align="center" gap="2">
						{data[value].icon}
						{data[value].label}
					</Flex>
				</Select.Trigger>
				<Select.Content position="popper">
					<Select.Item value="light">Light</Select.Item>
					<Select.Item value="dark">Dark</Select.Item>
				</Select.Content>
			</Select.Root>
		</Flex>
	);
};

PreviousSegmented Control

NextSeparator

Edit this page on GitHub.

Overview

Theme

Layout

Typography

Components

Utilities