Toggle / Toggle Group
on/off 상태를 전환할 수 있는 토글 버튼 컴포넌트입니다. 여러 토글을 그룹으로 묶어 사용할 수 있습니다.
설치
Terminal
npx @msub-core/ui-cli add toggle
사용법
TSX
import { Toggle, ToggleGroup, ToggleGroupItem } from "@msub-core/ui/components/toggle"
function MyComponent() {
const [pressed, setPressed] = useState(false)
return (
<>
{/* 단일 토글 */}
<Toggle pressed={pressed} onPressedChange={setPressed}>
<Bold className="h-4 w-4" />
</Toggle>
{/* 토글 그룹 */}
<ToggleGroup type="single" value="center">
<ToggleGroupItem value="left">
<AlignLeft className="h-4 w-4" />
</ToggleGroupItem>
<ToggleGroupItem value="center">
<AlignCenter className="h-4 w-4" />
</ToggleGroupItem>
<ToggleGroupItem value="right">
<AlignRight className="h-4 w-4" />
</ToggleGroupItem>
</ToggleGroup>
</>
)
}기본
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| pressed | boolean | - | No | 제어 모드 눌림 상태 |
| defaultPressed | boolean | false | No | 기본 눌림 상태 |
| onPressedChange | (pressed: boolean) => void | - | No | 눌림 상태 변경 콜백 |
| disabled | boolean | false | No | 비활성화 여부 |
| variant | "default" | "outline" | "default" | No | 토글 스타일 변형 |
| size | "default" | "sm" | "lg" | "default" | No | 토글 크기 |
크기
변형
텍스트 서식 (Toggle Group)
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| type | "single" | "multiple" | - | No | 단일 선택 또는 다중 선택 |
| value | string | string[] | - | No | 제어 모드 선택된 값 |
| defaultValue | string | string[] | - | No | 기본 선택 값 |
| onValueChange | (value: string | string[]) => void | - | No | 값 변경 콜백 |
| disabled | boolean | false | No | 전체 그룹 비활성화 |