Toggle Group

Một tập hợp các nút toggle hai trạng thái có thể bật hoặc tắt.

Cài đặt

npm

npx @galaxy-stack/nebula-cli@latest add toggle-group

pnpm

pnpm dlx @galaxy-stack/nebula-cli@latest add toggle-group

yarn

yarn dlx @galaxy-stack/nebula-cli@latest add toggle-group

bun

bunx @galaxy-stack/nebula-cli@latest add toggle-group

Sử dụng

Vue

<script setup lang="ts">
import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
</script>

<template>
  <ToggleGroup type="single">
    <ToggleGroupItem value="a">A</ToggleGroupItem>
    <ToggleGroupItem value="b">B</ToggleGroupItem>
    <ToggleGroupItem value="c">C</ToggleGroupItem>
  </ToggleGroup>
</template>

React

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

export default function App() {
  return (
    <ToggleGroup type="single">
      <ToggleGroupItem value="a">A</ToggleGroupItem>
      <ToggleGroupItem value="b">B</ToggleGroupItem>
      <ToggleGroupItem value="c">C</ToggleGroupItem>
    </ToggleGroup>
  )
}

Angular

import { Component } from '@angular/core';
import { ToggleGroupComponent, ToggleGroupItemComponent } from '@/components/ui/toggle-group';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ToggleGroupComponent, ToggleGroupItemComponent],
  template: `
    <ui-toggle-group type="single">
      <ui-toggle-group-item value="a">A</ui-toggle-group-item>
      <ui-toggle-group-item value="b">B</ui-toggle-group-item>
      <ui-toggle-group-item value="c">C</ui-toggle-group-item>
    </ui-toggle-group>
  `
})
export class AppComponent {}

API Reference

ToggleGroup Props

Prop	Type	Default	Mô tả	Frameworks
type	'single' | 'multiple'	-	Kiểu toggle (chọn một hoặc nhiều)	All
value	string[]	-	Giá trị controlled	All
defaultValue	string[]	-	Giá trị mặc định (uncontrolled)	All
onValueChange	(value: string[]) => void	-	Gọi khi giá trị thay đổi	All
disabled	boolean	false	Vô hiệu hóa group	All
variant	'default' | 'outline'	'default'	Biến thể kiểu hiển thị	All
size	'default' | 'sm' | 'lg'	'default'	Biến thể kích thước	All
className	string	''	CSS class bổ sung	All

ToggleGroupItem Props

Prop	Type	Default	Mô tả	Frameworks
value	string	-	Giá trị của item	All
disabled	boolean	false	Vô hiệu hóa item	All
asChild	boolean	false	Render như phần tử con	React, Vue, Angular
className	string	''	CSS class bổ sung	All

Ví dụ

Single selection

Vue

<ToggleGroup type="single">
  <ToggleGroupItem value="left">Left</ToggleGroupItem>
  <ToggleGroupItem value="center">Center</ToggleGroupItem>
  <ToggleGroupItem value="right">Right</ToggleGroupItem>
</ToggleGroup>

React

<ToggleGroup type="single">
  <ToggleGroupItem value="left">Left</ToggleGroupItem>
  <ToggleGroupItem value="center">Center</ToggleGroupItem>
  <ToggleGroupItem value="right">Right</ToggleGroupItem>
</ToggleGroup>

Angular

<ui-toggle-group type="single">
  <ui-toggle-group-item value="left">Left</ui-toggle-group-item>
  <ui-toggle-group-item value="center">Center</ui-toggle-group-item>
  <ui-toggle-group-item value="right">Right</ui-toggle-group-item>
</ui-toggle-group>

Multiple selection

Vue

<ToggleGroup type="multiple">
  <ToggleGroupItem value="bold">Bold</ToggleGroupItem>
  <ToggleGroupItem value="italic">Italic</ToggleGroupItem>
  <ToggleGroupItem value="underline">Underline</ToggleGroupItem>
</ToggleGroup>

React

<ToggleGroup type="multiple">
  <ToggleGroupItem value="bold">Bold</ToggleGroupItem>
  <ToggleGroupItem value="italic">Italic</ToggleGroupItem>
  <ToggleGroupItem value="underline">Underline</ToggleGroupItem>
</ToggleGroup>

Angular

<ui-toggle-group type="multiple">
  <ui-toggle-group-item value="bold">Bold</ui-toggle-group-item>
  <ui-toggle-group-item value="italic">Italic</ui-toggle-group-item>
  <ui-toggle-group-item value="underline">Underline</ui-toggle-group-item>
</ui-toggle-group>

Outline variant

Vue

<ToggleGroup type="single" variant="outline">
  <ToggleGroupItem value="a">A</ToggleGroupItem>
  <ToggleGroupItem value="b">B</ToggleGroupItem>
  <ToggleGroupItem value="c">C</ToggleGroupItem>
</ToggleGroup>

React

<ToggleGroup type="single" variant="outline">
  <ToggleGroupItem value="a">A</ToggleGroupItem>
  <ToggleGroupItem value="b">B</ToggleGroupItem>
  <ToggleGroupItem value="c">C</ToggleGroupItem>
</ToggleGroup>

Angular

<ui-toggle-group type="single" variant="outline">
  <ui-toggle-group-item value="a">A</ui-toggle-group-item>
  <ui-toggle-group-item value="b">B</ui-toggle-group-item>
  <ui-toggle-group-item value="c">C</ui-toggle-group-item>
</ui-toggle-group>

Kích thước

Vue

<div class="flex flex-col gap-4">
  <ToggleGroup type="single" size="sm">
    <ToggleGroupItem value="a">Small</ToggleGroupItem>
  </ToggleGroup>
  <ToggleGroup type="single" size="default">
    <ToggleGroupItem value="a">Default</ToggleGroupItem>
  </ToggleGroup>
  <ToggleGroup type="single" size="lg">
    <ToggleGroupItem value="a">Large</ToggleGroupItem>
  </ToggleGroup>
</div>

React

<div className="flex flex-col gap-4">
  <ToggleGroup type="single" size="sm">
    <ToggleGroupItem value="a">Small</ToggleGroupItem>
  </ToggleGroup>
  <ToggleGroup type="single" size="default">
    <ToggleGroupItem value="a">Default</ToggleGroupItem>
  </ToggleGroup>
  <ToggleGroup type="single" size="lg">
    <ToggleGroupItem value="a">Large</ToggleGroupItem>
  </ToggleGroup>
</div>

Angular

<div class="flex flex-col gap-4">
  <ui-toggle-group type="single" size="sm">
    <ui-toggle-group-item value="a">Small</ui-toggle-group-item>
  </ui-toggle-group>
  <ui-toggle-group type="single" size="default">
    <ui-toggle-group-item value="a">Default</ui-toggle-group-item>
  </ui-toggle-group>
  <ui-toggle-group type="single" size="lg">
    <ui-toggle-group-item value="a">Large</ui-toggle-group-item>
  </ui-toggle-group>
</div>

Tương tác bàn phím

Phím	Mô tả
Tab	Di chuyển focus đến item tiếp theo
Shift + Tab	Di chuyển focus đến item trước đó
Space	Bật/tắt item đang được focus
Enter	Bật/tắt item đang được focus
ArrowRight / ArrowDown	Di chuyển focus đến item tiếp theo
ArrowLeft / ArrowUp	Di chuyển focus đến item trước đó
Home	Di chuyển focus đến item đầu tiên
End	Di chuyển focus đến item cuối cùng

Khả năng tiếp cận

Tuân thủ WAI-ARIA Toolbar Pattern.

• Sử dụng role group cho container
• Hỗ trợ điều hướng bằng bàn phím đầy đủ
• Các items có thể focus được
• Hỗ trợ cả single và multiple selection

Khả năng truy cập

• Điều hướng bàn phím: [TODO]
• Đọc màn hình: [TODO]
• Quản lý focus: [TODO]
• Tuân thủ WCAG: Tuân thủ WCAG 2.1 cấp độ AA

Tác giả

Bùi Trọng Hiếu (kevinbui)

• GitHub: @buikevin
• Email: kevinbui210191@gmail.com

Giấy phép

MIT © 2025 Bùi Trọng Hiếu (kevinbui)