CoreSegmentedControlGroup

레거시 세그먼트 컨트롤 그룹 컴포넌트. CoreSegmentedControl 아이템들의 컨테이너입니다.

개요

마이그레이션 안내 — 이 컴포넌트는 레거시입니다. 신규 프로젝트에서는 SegmentedControl.Group을 사용하세요.

CoreSegmentedControlGroup은 CoreSegmentedControl 아이템들을 감싸는 컨테이너 컴포넌트입니다. 반드시 CoreSegmentedControl과 함께 사용해야 하며, 단독으로는 시각적 의미가 없습니다.

단일/다중 선택 — multiple prop으로 모드를 전환합니다. 다중 선택 시 value는 string[]
Size 자동 전파 — size를 Group에 지정하면 children CoreSegmentedControl에 자동으로 주입됩니다(단, children에 이미 size가 있으면 children 값이 우선)
방향 설정 — orientation으로 가로/세로 배치를 전환합니다
상태는 소비자 관리 — 선택 상태(selected)와 클릭 핸들러는 소비자가 직접 CoreSegmentedControl에 전달해야 합니다

Usage

기본 사용법 (단일 선택)

() => {
const [selected, setSelected] = React.useState('0');
return (
  <CoreSegmentedControlGroup
    size="md"
    value={selected}
    onChange={(e, value) => setSelected(value)}
  >
    <CoreSegmentedControl selected={selected === '0'} onClick={() => setSelected('0')}>Tab 1</CoreSegmentedControl>
    <CoreSegmentedControl selected={selected === '1'} onClick={() => setSelected('1')}>Tab 2</CoreSegmentedControl>
    <CoreSegmentedControl selected={selected === '2'} onClick={() => setSelected('2')} disabled>Tab 3 (disabled)</CoreSegmentedControl>
    <CoreSegmentedControl selected={selected === '3'} onClick={() => setSelected('3')}>Tab 4</CoreSegmentedControl>
  </CoreSegmentedControlGroup>
);
}

다중 선택

multiple을 켜면 복수 선택이 가능합니다. value는 string[]로 관리합니다.

() => {
const [selected, setSelected] = React.useState([]);
const toggle = (value) =>
  setSelected((prev) =>
    prev.includes(value) ? prev.filter((v) => v !== value) : [...prev, value]
  );
return (
  <CoreSegmentedControlGroup
    size="md"
    multiple
    value={selected}
    onChange={(e, value) => toggle(value)}
  >
    <CoreSegmentedControl selected={selected.includes('0')} onClick={() => toggle('0')}>Tab 1</CoreSegmentedControl>
    <CoreSegmentedControl selected={selected.includes('1')} onClick={() => toggle('1')}>Tab 2</CoreSegmentedControl>
    <CoreSegmentedControl selected={selected.includes('2')} onClick={() => toggle('2')} disabled>Tab 3 (disabled)</CoreSegmentedControl>
    <CoreSegmentedControl selected={selected.includes('3')} onClick={() => toggle('3')}>Tab 4</CoreSegmentedControl>
  </CoreSegmentedControlGroup>
);
}

크기 설정

() => {
const [selected, setSelected] = React.useState('0');
return (
  <VStack $css={{ gap: '16px' }}>
    <CoreSegmentedControlGroup size="sm" value={selected} onChange={(e, v) => setSelected(v)}>
      <CoreSegmentedControl selected={selected === '0'} onClick={() => setSelected('0')}>Small 1</CoreSegmentedControl>
      <CoreSegmentedControl selected={selected === '1'} onClick={() => setSelected('1')}>Small 2</CoreSegmentedControl>
    </CoreSegmentedControlGroup>
    <CoreSegmentedControlGroup size="md" value={selected} onChange={(e, v) => setSelected(v)}>
      <CoreSegmentedControl selected={selected === '0'} onClick={() => setSelected('0')}>Medium 1</CoreSegmentedControl>
      <CoreSegmentedControl selected={selected === '1'} onClick={() => setSelected('1')}>Medium 2</CoreSegmentedControl>
    </CoreSegmentedControlGroup>
    <CoreSegmentedControlGroup size="lg" value={selected} onChange={(e, v) => setSelected(v)}>
      <CoreSegmentedControl selected={selected === '0'} onClick={() => setSelected('0')}>Large 1</CoreSegmentedControl>
      <CoreSegmentedControl selected={selected === '1'} onClick={() => setSelected('1')}>Large 2</CoreSegmentedControl>
    </CoreSegmentedControlGroup>
  </VStack>
);
}

세로 방향

() => {
const [selected, setSelected] = React.useState('0');
return (
  <CoreSegmentedControlGroup
    size="md"
    orientation="vertical"
    value={selected}
    onChange={(e, value) => setSelected(value)}
  >
    <CoreSegmentedControl selected={selected === '0'} onClick={() => setSelected('0')}>Tab 1</CoreSegmentedControl>
    <CoreSegmentedControl selected={selected === '1'} onClick={() => setSelected('1')}>Tab 2</CoreSegmentedControl>
    <CoreSegmentedControl selected={selected === '2'} onClick={() => setSelected('2')}>Tab 3</CoreSegmentedControl>
  </CoreSegmentedControlGroup>
);
}

Props

ComponentPropsWithoutRef<'div'>에서 onChange를 제외하고 확장한 컴포넌트입니다.

Prop

Type

스타일

Group 컨테이너

display: flex, gap: spacing-100 (4px), padding: spacing-100 (4px)
border-radius: radius-100, background-color: background-1
box-shadow: inset 0 0 0 1px border[1], transition: 0.2s

Size Variants (Group 높이)

size	height
`sm`	26px
`md`	32px
`lg`	40px

Orientation Variants

orientation	flex-direction
`horizontal`	`row`
`vertical`	`column`

마이그레이션 가이드

신규 SegmentedControl.Group은 Base UI 기반으로 선택 상태를 자동 관리합니다.

CoreSegmentedControlGroup	SegmentedControl.Group (신규)
`value` + `onChange` 직접 관리	`SegmentedControl.Group`의 `value` / `onValueChange`
`multiple` prop	`SegmentedControl.Group multiple`
`CoreSegmentedControl selected onClick`	`SegmentedControl.Item value`
`orientation`	`SegmentedControl.Group orientation`

On this page