ToggleGroup

სასტუმროს ერთი ან რამდენიმე სერვისის არჩევა.

მაგალითი

@llc-conciergia/ui/toggle-group

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

<ToggleGroup multiple aria-label="სერვისები" defaultValue={["breakfast"]}>
  <ToggleGroupItem value="breakfast" variant="outline">
    საუზმე
  </ToggleGroupItem>
  <ToggleGroupItem value="spa" variant="outline">
    სპა
  </ToggleGroupItem>
</ToggleGroup>

ინსტალაცია

terminal

pnpm add @llc-conciergia/ui

იმპორტი

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

Conciergia CLI

npx @llc-conciergia/cli add toggle-group

shadcn CLI

npx shadcn@latest add https://ui.conciergia.co/r/toggle-group.json

Props

Prop	ტიპი	ნაგულისხმევი	აღწერა
ToggleGroup: multiple	boolean	false	რამდენიმე არჩევანის დაშვება.
ToggleGroup: value / defaultValue	readonly string[]	—	არჩეული მნიშვნელობები ერთეული არჩევის დროსაც მასივია.
ToggleGroup: onValueChange	(values, details) => void	—	არჩევის ცვლილება.
ToggleGroup: orientation / loopFocus	horizontal \| vertical / boolean	horizontal / true	კლავიატურის მიმართულება და წრიული ფოკუსი.
ToggleGroup: disabled	boolean	false	მთელი ჯგუფის გამორთვა.
ToggleGroupItem: value	string	—	ელემენტის უნიკალური მნიშვნელობა.
ToggleGroupItem: variant / size	default \| outline / sm \| md \| lg	default / md	Toggle-ის საერთო სტილები.
ToggleGroupItem: disabled / children / aria-label	Toggle props	—	გამორთვა და ხელმისაწვდომი სახელი.
ToggleGroup / ToggleGroupItem: ref / className / …	Base UI props	—	ჯგუფის ან ღილაკის დამატებითი ატრიბუტები.