Toggle groupstandard
여러 토글을 한 줄로 묶어 하나만, 또는 여러 개를 고르게 하는 토글 그룹(toggle group)입니다. shadcn base-nova 의 stock 아이템이며 Base UI `ToggleGroup` 위에 서 있습니다. 모양은 `toggle` 의 변형을 그대로 씁니다.
설치
pnpm
pnpm dlx shadcn@4.23.0 add @uikit/toggle-group의존 아이템toggle
Default
toggle-group-example.tsx
"use client"
import * as React from "react"
import { Example, ExampleWrapper,} from "@/components/example"import { Field, FieldDescription, FieldLabel,} from "@/components/ui/field"import { Input } from "@/components/ui/input"import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue,} from "@/components/ui/select"import { ToggleGroup, ToggleGroupItem,} from "@/components/ui/toggle-group"import { ArrowDownIcon, ArrowUpIcon, BoldIcon, BookmarkIcon, HeartIcon, ItalicIcon, StarIcon, TrendingUpIcon, UnderlineIcon } from "lucide-react"
export default function ToggleGroupExample() { return ( <ExampleWrapper> <ToggleGroupBasic /> <ToggleGroupOutline /> <ToggleGroupOutlineWithIcons /> <ToggleGroupSizes /> <ToggleGroupSpacing /> <ToggleGroupWithIcons /> <ToggleGroupFilter /> <ToggleGroupDateRange /> <ToggleGroupSort /> <ToggleGroupWithInputAndSelect /> <ToggleGroupVertical /> <ToggleGroupVerticalOutline /> <ToggleGroupVerticalOutlineWithIcons /> <ToggleGroupVerticalWithSpacing /> <ToggleGroupFontWeightSelector /> </ExampleWrapper> )}
function ToggleGroupBasic() { return ( <Example title="Basic"> <ToggleGroup multiple spacing={1}> <ToggleGroupItem value="bold" aria-label="Toggle bold"> <BoldIcon /> </ToggleGroupItem> <ToggleGroupItem value="italic" aria-label="Toggle italic"> <ItalicIcon /> </ToggleGroupItem> <ToggleGroupItem value="underline" aria-label="Toggle underline"> <UnderlineIcon /> </ToggleGroupItem> </ToggleGroup> </Example> )}
function ToggleGroupOutline() { return ( <Example title="Outline"> <ToggleGroup variant="outline" defaultValue={["all"]}> <ToggleGroupItem value="all" aria-label="Toggle all"> All </ToggleGroupItem> <ToggleGroupItem value="missed" aria-label="Toggle missed"> Missed </ToggleGroupItem> </ToggleGroup> </Example> )}
function ToggleGroupOutlineWithIcons() { return ( <Example title="Outline With Icons"> <ToggleGroup variant="outline" multiple size="sm"> <ToggleGroupItem value="bold" aria-label="Toggle bold"> <BoldIcon /> </ToggleGroupItem> <ToggleGroupItem value="italic" aria-label="Toggle italic"> <ItalicIcon /> </ToggleGroupItem> <ToggleGroupItem value="underline" aria-label="Toggle underline"> <UnderlineIcon /> </ToggleGroupItem> </ToggleGroup> </Example> )}
function ToggleGroupSizes() { return ( <Example title="Sizes"> <div className="flex flex-col gap-4"> <ToggleGroup size="sm" defaultValue={["top"]} variant="outline"> <ToggleGroupItem value="top" aria-label="Toggle top"> Top </ToggleGroupItem> <ToggleGroupItem value="bottom" aria-label="Toggle bottom"> Bottom </ToggleGroupItem> <ToggleGroupItem value="left" aria-label="Toggle left"> Left </ToggleGroupItem> <ToggleGroupItem value="right" aria-label="Toggle right"> Right </ToggleGroupItem> </ToggleGroup> <ToggleGroup defaultValue={["top"]} variant="outline"> <ToggleGroupItem value="top" aria-label="Toggle top"> Top </ToggleGroupItem> <ToggleGroupItem value="bottom" aria-label="Toggle bottom"> Bottom </ToggleGroupItem> <ToggleGroupItem value="left" aria-label="Toggle left"> Left </ToggleGroupItem> <ToggleGroupItem value="right" aria-label="Toggle right"> Right </ToggleGroupItem> </ToggleGroup> </div> </Example> )}
function ToggleGroupSpacing() { return ( <Example title="With Spacing"> <ToggleGroup size="sm" defaultValue={["top"]} spacing={2}> <ToggleGroupItem value="top" aria-label="Toggle top"> Top </ToggleGroupItem> <ToggleGroupItem value="bottom" aria-label="Toggle bottom"> Bottom </ToggleGroupItem> <ToggleGroupItem value="left" aria-label="Toggle left"> Left </ToggleGroupItem> <ToggleGroupItem value="right" aria-label="Toggle right"> Right </ToggleGroupItem> </ToggleGroup> </Example> )}
function ToggleGroupWithIcons() { return ( <Example title="With Icons"> <ToggleGroup multiple variant="outline" spacing={2} size="sm"> <ToggleGroupItem value="star" aria-label="Toggle star" className="aria-pressed:bg-transparent aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground" > <StarIcon /> Star </ToggleGroupItem> <ToggleGroupItem value="heart" aria-label="Toggle heart" className="aria-pressed:bg-transparent aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground" > <HeartIcon /> Heart </ToggleGroupItem> <ToggleGroupItem value="bookmark" aria-label="Toggle bookmark" className="aria-pressed:bg-transparent aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground" > <BookmarkIcon /> Bookmark </ToggleGroupItem> </ToggleGroup> </Example> )}
function ToggleGroupFilter() { return ( <Example title="Filter"> <ToggleGroup defaultValue={["all"]} variant="outline" size="sm"> <ToggleGroupItem value="all" aria-label="All"> All </ToggleGroupItem> <ToggleGroupItem value="active" aria-label="Active"> Active </ToggleGroupItem> <ToggleGroupItem value="completed" aria-label="Completed"> Completed </ToggleGroupItem> <ToggleGroupItem value="archived" aria-label="Archived"> Archived </ToggleGroupItem> </ToggleGroup> </Example> )}
function ToggleGroupDateRange() { return ( <Example title="Date Range"> <ToggleGroup defaultValue={["today"]} variant="outline" size="sm" spacing={2} > <ToggleGroupItem value="today" aria-label="Today"> Today </ToggleGroupItem> <ToggleGroupItem value="week" aria-label="This Week"> This Week </ToggleGroupItem> <ToggleGroupItem value="month" aria-label="This Month"> This Month </ToggleGroupItem> <ToggleGroupItem value="year" aria-label="This Year"> This Year </ToggleGroupItem> </ToggleGroup> </Example> )}
function ToggleGroupSort() { return ( <Example title="Sort"> <ToggleGroup defaultValue={["newest"]} variant="outline" size="sm"> <ToggleGroupItem value="newest" aria-label="Newest"> <ArrowDownIcon /> Newest </ToggleGroupItem> <ToggleGroupItem value="oldest" aria-label="Oldest"> <ArrowUpIcon /> Oldest </ToggleGroupItem> <ToggleGroupItem value="popular" aria-label="Popular"> <TrendingUpIcon /> Popular </ToggleGroupItem> </ToggleGroup> </Example> )}
function ToggleGroupWithInputAndSelect() { const items = [ { label: "All", value: "all" }, { label: "Active", value: "active" }, { label: "Archived", value: "archived" }, ] return ( <Example title="With Input and Select"> <div className="flex items-center gap-2"> <Input type="search" placeholder="Search..." className="flex-1" /> <Select items={items} defaultValue={items[0]}> <SelectTrigger aria-label="Select option" className="w-32"> <SelectValue /> </SelectTrigger> <SelectContent> <SelectGroup> {items.map((item) => ( <SelectItem key={item.value} value={item.value}> {item.label} </SelectItem> ))} </SelectGroup> </SelectContent> </Select> <ToggleGroup defaultValue={["grid"]} variant="outline"> <ToggleGroupItem value="grid" aria-label="Grid view"> Grid </ToggleGroupItem> <ToggleGroupItem value="list" aria-label="List view"> List </ToggleGroupItem> </ToggleGroup> </div> </Example> )}
function ToggleGroupVertical() { return ( <Example title="Vertical"> <ToggleGroup multiple orientation="vertical" spacing={1}> <ToggleGroupItem value="bold" aria-label="Toggle bold"> <BoldIcon /> </ToggleGroupItem> <ToggleGroupItem value="italic" aria-label="Toggle italic"> <ItalicIcon /> </ToggleGroupItem> <ToggleGroupItem value="underline" aria-label="Toggle underline"> <UnderlineIcon /> </ToggleGroupItem> </ToggleGroup> </Example> )}
function ToggleGroupVerticalOutline() { return ( <Example title="Vertical Outline"> <ToggleGroup variant="outline" defaultValue={["all"]} orientation="vertical" size="sm" > <ToggleGroupItem value="all" aria-label="Toggle all"> All </ToggleGroupItem> <ToggleGroupItem value="active" aria-label="Toggle active"> Active </ToggleGroupItem> <ToggleGroupItem value="completed" aria-label="Toggle completed"> Completed </ToggleGroupItem> <ToggleGroupItem value="archived" aria-label="Toggle archived"> Archived </ToggleGroupItem> </ToggleGroup> </Example> )}
function ToggleGroupVerticalOutlineWithIcons() { return ( <Example title="Vertical Outline With Icons"> <ToggleGroup variant="outline" multiple orientation="vertical" size="sm"> <ToggleGroupItem value="bold" aria-label="Toggle bold"> <BoldIcon /> </ToggleGroupItem> <ToggleGroupItem value="italic" aria-label="Toggle italic"> <ItalicIcon /> </ToggleGroupItem> <ToggleGroupItem value="underline" aria-label="Toggle underline"> <UnderlineIcon /> </ToggleGroupItem> </ToggleGroup> </Example> )}
function ToggleGroupFontWeightSelector() { const [fontWeight, setFontWeight] = React.useState("normal") return ( <Example title="Font Weight Selector"> <Field> <FieldLabel>Font Weight</FieldLabel> <ToggleGroup value={[fontWeight]} onValueChange={(value) => setFontWeight(value[0] ?? fontWeight)} variant="outline" spacing={2} size="lg" > <ToggleGroupItem value="light" className="flex size-16 flex-col items-center justify-center rounded-xl" > <span className="text-2xl leading-none font-light">Aa</span> <span className="text-xs text-muted-foreground">Light</span> </ToggleGroupItem> <ToggleGroupItem value="normal" className="flex size-16 flex-col items-center justify-center rounded-xl" > <span className="text-2xl leading-none font-normal">Aa</span> <span className="text-xs text-muted-foreground">Normal</span> </ToggleGroupItem> <ToggleGroupItem value="medium" className="flex size-16 flex-col items-center justify-center rounded-xl" > <span className="text-2xl leading-none font-medium">Aa</span> <span className="text-xs text-muted-foreground">Medium</span> </ToggleGroupItem> <ToggleGroupItem value="bold" className="flex size-16 flex-col items-center justify-center rounded-xl" > <span className="text-2xl leading-none font-bold">Aa</span> <span className="text-xs text-muted-foreground">Bold</span> </ToggleGroupItem> </ToggleGroup> <FieldDescription> Use{" "} <code className="rounded-md bg-muted px-1 py-0.5 font-mono"> font-{fontWeight} </code>{" "} to set the font weight. </FieldDescription> </Field> </Example> )}
function ToggleGroupVerticalWithSpacing() { return ( <Example title="Vertical With Spacing"> <ToggleGroup size="sm" defaultValue={["top"]} orientation="vertical" spacing={1} > <ToggleGroupItem value="top" aria-label="Toggle top"> Top </ToggleGroupItem> <ToggleGroupItem value="bottom" aria-label="Toggle bottom"> Bottom </ToggleGroupItem> <ToggleGroupItem value="left" aria-label="Toggle left"> Left </ToggleGroupItem> <ToggleGroupItem value="right" aria-label="Toggle right"> Right </ToggleGroupItem> </ToggleGroup> </Example> )}