Toggle Group

정렬이나 서식처럼 서로 관련된 눌림 옵션을 묶을 때 사용합니다.

미리보기

텍스트 정렬

왼쪽, 가운데, 오른쪽 정렬 중 선택하고 제어 상태의 현재 값을 표시합니다.

왼쪽

미리보기를 불러오는 중입니다.

설치

Registry를 처음 사용한다면 기본 설정과 공통 스타일 설치 을 먼저 완료하세요.

npx shadcn@latest add @neumorphism-ui/toggle-group

공통 base를 한 번 설치한 뒤 CLI로 필요한 컴포넌트와 의존성을 추가합니다.

Registry JSON

사용법

그룹에 이름을 주고 각 ToggleGroupItem에 고유 value를 지정하세요. 선택 값은 배열로 관리하고 여러 옵션을 동시에 누를 수 있다면 multiple을 설정합니다.

"use client";

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";

export default function Example() {
  return (
    <ToggleGroup defaultValue={["left"]} aria-label="Text alignment">
      <ToggleGroupItem value="left">Left</ToggleGroupItem>
      <ToggleGroupItem value="center">Center</ToggleGroupItem>
      <ToggleGroupItem value="right">Right</ToggleGroupItem>
    </ToggleGroup>
  );
}

API 레퍼런스

단일 또는 복수 선택을 묶는 키보드 탐색 토글 그룹. 그룹의 aria-label과 각 항목 이름을 제공하세요. 방향키 이동과 선택 상태를 구분합니다.

컴포넌트	속성	타입	기본값	설명
`ToggleGroup`	`value / defaultValue`	`readonly string[]`	`—`	제어 상태 또는 최초 상태를 지정합니다.
`ToggleGroup`	`multiple`	`boolean`	`—`	복수 항목 선택을 허용합니다.
`ToggleGroup`	`orientation`	`"horizontal" \| "vertical"`	`—`	배치 방향과 키보드 이동 방향입니다.

미리보기

텍스트 정렬

설치

사용법

API 레퍼런스

접근성