Meta tags:
description=A high-quality, unstyled React toggle group component that provides shared state to a series of toggle buttons.;
keywords=React Toggle Group,Toggle Button Group,Segmented Control,Button Set,Radio Group Alternative,Exclusive Selection Toggle,Multi Select Toggle Buttons,Accessible Toggle Group,Headless React Components,Base UI;

Headings (most frequently used words):

togglegroup, toggle, group, anatomy, examples, api, reference, multiple, propshide, statehide, changeeventreasonhide, changeeventdetailshide,

Text of the page (most frequently used words):
the (55), #toggle (39), group (23), props (22), svg (18), togglegroup (17), react (16), style (16), function (15), type (14), state (14), undefined (13), multiple (13), pressed (13), event (10), boolean (10), when (10), description (10), name (10), classname (10), styles (10), from (9), orientation (9), css (9), value (9), import (9), base (8), default (8), string (8), aria (8), label (8), return (8), false (7), disabled (7), component (7), button (7), element (6), data (6), componentprops (6), width (6), height (6), viewbox (6), currentcolor (6), display (6), block (6), path (6), 2002 (6), 13232 (6), 14538 (6), 23721 (6), 33646 (6), 39559 (6), 526 (6), 80731 (6), 93772 (6), 99685 (6), 0961 (6), 18793 (6), 20099 (6), 19238 (6), 8076 (6), index (6), whether (5), item (5), buttons (5), defaultvalue (5), 73331 (5), that (4), indicates (4), allows (4), hide (4), horizontal (4), can (4), true (4), present (4), reactelement (4), fill (4), 4386 (4), 8h5 (4), 66264 (4), 59247 (4), 52689 (4), 46131 (4), 19809 (4), 40161 (4), 35128 (4), 30095 (4), 26099 (4), 23371 (4), 20643 (4), 59598 (4), 73734 (4), 13523 (4), 2666 (4), 3373 (4), 4075 (4), 4731 (4), 5386 (4), 5983 (4), 6487 (4), 699 (4), 739 (4), 7662 (4), 7935 (4), module (4), stackblitz (4), modules (4), void (3), will (3), with (3), none (3), one (3), export (3), time (3), returns (3), render (3), cssproperties (3), bold (3), italic (3), 73353 (3), 3335 (3), 2669 (3), 1335 (3), 6669 (3), 39235 (3), 32568 (3), 60754 (3), 6742 (3), 1333 (3), 59238 (3), 86665 (3), 40757 (3), anatomy (3), left (3), align (3), stroke (3), strokelinecap (3), square (3), strokelinejoin (3), round (3), 5h11m (3), field (3), menu (3), propagate (2), reason (2), changeeventdetails (2), vertical (2), only (2), any (2), becomes (2), others (2), become (2), unpressed (2), items (2), should (2), ignore (2), user (2), interaction (2), same (2), attribute (2), applied (2), based (2), class (2), loopfocus (2), onvaluechange (2), represented (2), array (2), values (2), all (2), this (2), counterpart (2), prop (2), api (2), reference (2), show (2), code (2), text (2), panel (2), boldicon (2), italicicon (2), underline (2), underlineicon (2), 13333 (2), 66666c3 (2), 3333c3 (2), 8667 (2), 8667h9 (2), 93353 (2), 26686c9 (2), 29619 (2), 26686 (2), 59006 (2), 52599 (2), 86261 (2), 79244 (2), 72686 (2), 17173c6 (2), 66127 (2), 19808 (2), 60158 (2), 55125 (2), 50092 (2), 46096 (2), 43368 (2), 4064 (2), 59597 (2), 73733 (2), 13522 (2), 79594 (2), 799 (2), 72577 (2), 812 (2), 66019 (2), 59461 (2), 8648 (2), 53492 (2), 9039 (2), 48459 (2), 43425 (2), 0031 (2), 39429 (2), 0623 (2), 36701 (2), 33973 (2), 1927 (2), 2626 (2), 404 (2), 474 (2), 6044 (2), 6635 (2), 7628 (2), 8019 (2), 8546 (2), 8677 (2), 13729 (2), 20745 (2), 27304 (2), 33862 (2), 39831 (2), 44864 (2), 49897 (2), 53894 (2), 56622 (2), 5935 (2), 1333c10 (2), 204 (2), 2741 (2), 3397 (2), 4053 (2), 465 (2), 5153 (2), 5656 (2), 6056 (2), 6329 (2), 6602 (2), 224 (2), 2667 (2), 0626 (2), 99247 (2), 92689 (2), 8613 (2), 80161 (2), 75128 (2), 70095 (2), 66099 (2), 63371 (2), 60643 (2), 93732 (2), 00748 (2), 07307 (2), 13865 (2), 19834 (2), 24867 (2), 299 (2), 33897 (2), 36625 (2), 39353 (2), 3323 (2), 3454 (2), 3981 (2), 4372 (2), 5365 (2), 5956 (2), 726 (2), 796 (2), 9373 (2), 0073 (2), 1377 (2), 1969 (2), 2961 (2), 3352 (2), 3879 (2), 401 (2), tsx (2), examples (2), alignlefticon (2), center (2), aligncentericon (2), right (2), alignrighticon (2), view (2), provider (2), navigation (2), dialog (2), checkbox (2), trigger, triggered, applicable, ispropagationallowed, allowed, iscanceled, has, been, canceled, allowpropagation, cases, where, stop, propagation, cancel, cancels, handling, native, associated, custom, for, togglegroupchangeeventdetails, togglegroupchangeeventreason, changeeventreason, togglegroupstate, togglegroupprops, htmlprops, accepts, you, replace, html, different, tag, compose, another, object, loop, keyboard, focus, back, first, end, list, reached, while, using, arrow, keys, groupvalue, eventdetails, callback, fired, states, changes, controlled, uncontrolled, table, formatting, options, 13333c3, 37226, 96106, 2h4, 26686v12, 8h3, 73353c3, 0389, 6277, 86686c11, 7783, 3115, 4c13, 9968, 4945, 78881, 2929, 24375c11, 8897, 70615, 93066, 06666c12, 44906, 9506, 33353, 13333h3, 73353zm6, 2h8, 03733, 06666c10, 096, 93333, 93333h6, 93353v3, 2zm6, 8h7, 73353h8, 0768, 4c10, 7232, 8h6, 93353v8z, 12186c8, 48583, 12267, 44578, 1265, 4062, 13332h6, 93328c6, 28683c6, 46079c6, 66665c6, 87251c6, 04647c6, 16157c6, 93328, 19999h7, 70099l6, 69057, 86661c5, 8384c5, 9535c5, 1275c5, 3333c5, 5392c5, 7131c5, 8282c5, 86661, 06661c9, 8282c9, 7131c9, 5392c9, 3333c9, 1275c9, 9535c9, 8384c9, 06661, 8h8, 2989l9, 30932, 19999h10, 16157c10, 04647c10, 87251c10, 66665c10, 46079c10, 28683c10, 17173c10, 13332h8, 66349c8, 61807, 12555, 57207, 12171, 12186z, 13332c3, 17173c3, 28684c3, 4608c3, 87252c3, 04648c3, 16158c3, 19999v7, 99999c3, 55144, 99998, 2667c10, 4485, 99999v3, 19999c12, 16158c12, 04648c12, 87252c12, 66666c12, 4608c12, 28684c12, 17173c12, 13332h10, 17173c9, 28684c9, 4608c9, 66666c9, 87252c9, 04648c9, 16158c9, 19999v8, 97187c10, 0855, 32179, 0818, 21352, 1896c6, 94152, 3138, 3136, 06666v3, 19999c5, 16158c6, 04648c6, 87252c6, 66666c6, 4608c6, 28684c6, 13332h3, 73331zm3, 3717c3, 4868c3, 6608c3, 8667c3, 0725c3, 2465c3, 3616c3, 4h12, 2666c12, 3616c12, 2465c12, 0725c12, 8667c12, 6608c12, 4868c12, 3717c12, 3333h3, 73331z, exampletogglegroupmultiple, add, allow, pressing, more, than, and, use, single, part, alignment, 7h9m2, 7h9m5, 7h9m8, exampletogglegroup, source, markdown, provides, shared, series, top, npm, github, userender, mergeprops, direction, csp, utils, tooltip, toolbar, toast, tabs, switch, slider, separator, select, scroll, area, radio, progress, preview, card, popover, otp, new, number, meter, menubar, input, form, fieldset, drawer, context, combobox, collapsible, avatar, autocomplete, alert, accordion, components, llms, txt, typescript, forms, customization, composition, animation, styling, handbook, about, community, releases, accessibility, quick, start, overview, search, skip, contents,

Text of the page (random words):
toggle group base ui skip to contents search k navigation overview quick start accessibility releases community about handbook styling animation composition customization forms typescript llms txt components accordion alert dialog autocomplete avatar button checkbox checkbox group collapsible combobox context menu dialog drawer field fieldset form input menu menubar meter navigation menu number field otp field new popover preview card progress radio scroll area select separator slider switch tabs toast toggle toggle group toolbar tooltip utils csp provider direction provider mergeprops userender github npm 1 6 0 toggle group top anatomy examples multiple api reference toggle group provides a shared state to a series of toggle buttons view as markdown view source index tsx index module css css modules stackblitz css modules stackblitz import as react from react import toggle from base ui react toggle import togglegroup from base ui react toggle group import styles from index module css export default function exampletogglegroup return togglegroup aria label text alignment defaultvalue left classname styles panel toggle aria label align left value left classname styles button alignlefticon toggle toggle aria label align center value center classname styles button aligncentericon toggle toggle aria label align right value right classname styles button alignrighticon toggle togglegroup function alignlefticon props react componentprops svg return svg width 16 height 16 fill none viewbox 0 0 16 16 stroke currentcolor props style display block props style path strokelinecap square strokelinejoin round d m2 5 4 5h11m 11 7h9m2 5 8h5 svg function aligncentericon props react componentprops svg return svg width 16 height 16 viewbox 0 0 16 16 stroke currentcolor props style display block props style path strokelinecap square strokelinejoin round d m2 5 4 5h11m 10 7h9m5 5 8h5 svg function alignrighticon props react componentprops svg return svg width 16 height 16 viewbox 0 0 16 16 stroke currentcolor props style display block props style path strokelinecap square strokelinejoin round d m2 5 4 5h11m 9 7h9m8 5 8h5 svg show code anatomy import the component and use it as a single part anatomy import togglegroup from base ui react toggle group togglegroup examples multiple add the multiple prop to allow pressing more than one toggle at a time index tsx index module css css modules stackblitz css modules stackblitz import toggle from base ui react toggle import togglegroup from base ui react toggle group import styles from index module css export default function exampletogglegroupmultiple return togglegroup multiple defaultvalue bold italic aria label text formatting options classname styles panel toggle aria label bold value bold classname styles button boldicon toggle toggle aria label italic value italic classname styles button italicicon toggle toggle aria label underline value underline classname styles button underlineicon toggle togglegroup function boldicon props react componentprops svg return svg width 16 height 16 viewbox 0 0 16 16 fill currentcolor props style display block props style path d m3 73353 2 13333c3 4386 2 13333 3 2002 2 37226 3 2002 2 66666c3 2002 2 96106 3 4386 3 2 3 73353 3 2h4 26686v12 8h3 73353c3 4386 12 8 3 2002 13 0389 3 2002 13 3333c3 2002 13 6277 3 4386 13 8667 3 73353 13 8667h9 86686c11 7783 13 8667 13 3335 12 3115 13 3335 10 4c13 3335 8 9968 12 4945 7 78881 11 2929 7 24375c11 8897 6 70615 12 2669 5 93066 12 2669 5 06666c12 2669 3 44906 10 9506 2 13333 9 33353 2 13333h3 73353zm6 93353 3 2h8 26686c9 29619 3 2 10 1335 4 03733 10 1335 5 06666c10 1335 6 096 9 29619 6 93333 8 26686 6 93333h6 93353v3 2zm6 93353 8h7 73353h8 26686c9 59006 8 10 6669 9 0768 10 6669 10 4c10 6669 11 7232 9 59006 12 8 8 26686 12 8h6 93353v8z svg function italicicon props react componentprops svg return svg width 16 height 16 viewbox 0 0 16 16 fill currentcolor props style display block props style path d m8 52599 2 12186c8 48583 2 12267 8 44578 2 1265 8 4062 2 13332h6 93328c6 86261 2 13232 6 79244 2 14538 6 72686 2 17173c6 66127 2 19808 6 60158 2 23721 6 55125 2 28683c6 50092 2 33646 6 46096 2 39559 6 43368 2 46079c6 4064 2 526 6 39235 2 59597 6 39235 2 66665c6 39235 2 73733 6 4064 2 80731 6 43368 2 87251c6 46096 2 93772 6 50092 2 99685 6 55125 3 04647c6 60158 3 0961 6 66127 3 13522 6 72686 3 16157c6 79244 3 18793 6 86261 3 20099 6 93328 3 19999h7 70099l6 69057 12 8h5 86661c5 79594 12 799 5 72577 12 812 5 66019 12 8384c5 59461 12 8648 5 53492 12 9039 5 48459 12 9535c5 43425 13 0031 5 39429 13 0623 5 36701 13 1275c5 33973 13 1927 5 32568 13 2626 5 32568 13 3333c5 32568 13 404 5 33973 13 474 5 36701 13 5392c5 39429 13 6044 5 43425 13 6635 5 48459 13 7131c5 53492 13 7628 5 59461 13 8019 5 66019 13 8282c5 72577 13 8546 5 79594 13 8677 5 86661 13 8667h9 06661c9 13729 13 8677 9 20745 13 8546 9 27304 13 8282c9 33862 13 8019 9 39831 13 7628 9 44864 13 7131c9 49897 13 6635 9 53894 13 6044 9 56622 13 5392c9 5935 13 474 9 60754 13 404 9 60754 13 3333c9 60754 13 2626 9 5935 13 1927 9 56622 13 1275c9 53894 13 0623 9 49897 13 0031 9 44864 12 9535c9 39831 12 9039 9 33862 12 8648 9 27304 12 8384c9 20745 12 812 9 13729 12 799 9 06661 12 8h8 2989l9 30932 3 19999h10 1333c10 204 3 20099 10 2741 3 18793 10 3397 3 16157c10 4053 3 13522 10 465 3 0961 10 5153 3 04647c10 5656 2 99685 10 6056 2 93772 10 6329 2 87251c10 6602 2 80731 10 6742 2 73733 10 6742 2 66665c10 6742 2 59597 10 6602 2 526 10 6329 2 46079c10 6056 2 39559 10 5656 2 33646 10 5153 2 28683c10 465 2 23721 10 4053 2 19808 10 3397 2 17173c10 2741 2 14538 10 204 2 13232 10 1333 2 13332h8 66349c8 61807 2 12555 8 57207 2 12171 8 52599 2 12186z svg function underlineicon props react componentprops svg return svg width 16 height 16 viewbox 0 0 16 16 fill currentcolor props style display block props style path d m3 73331 2 13332c3 66264 2 13232 3 59247 2 14538 3 52689 2 17173c3 46131 2 19809 3 40161 2 23721 3 35128 2 28684c3 30095 2 33646 3 26099 2 39559 3 23371 2 4608c3 20643 2 526 3 19238 2 59598 3 19238 2 66666c3 19238 2 73734 3 20643 2 80731 3 23371 2 87252c3 26099 2 93772 3 30095 2 99685 3 35128 3 04648c3 40161 3 0961 3 46131 3 13523 3 52689 3 16158c3 59247 3 18793 3 66264 3 20099 3 73331 3 19999v7 99999c3 73331 10 224 5 55144 12 2667 7 99998 12 2667c10 4485 12 2667 12 2666 10 224 12 2666 7 99999v3 19999c12 3373 3 20099 12 4075 3 18793 12 4731 3 16158c12 5386 3 13523 12 5983 3 0961 12 6487 3 04648c12 699 2 99685 12 739 2 93772 12 7662 2 87252c12 7935 2 80731 12 8076 2 73734 12 8076 2 66666c12 8076 2 59598 12 7935 2 526 12 7662 2 4608c12 739 2 39559 12 699 2 33646 12 6487 2 28684c12 5983 2 23721 12 5386 2 19809 12 4731 2 17173c12 4075 2 14538 12 3373 2 13232 12 2666 2 13332h10 1333c10 0626 2 13232 9 99247 2 14538 9 92689 2 17173c9 8613 2 19809 9 80161 2 23721 9 75128 2 28684c9 70095 2 33646 9 66099 2 39559 9 63371 2 4608c9 60643 2 526 9 59238 2 59598 9 59238 2 66666c9 59238 2 73734 9 60643 2 80731 9 63371 2 87252c9 66099 2 93772 9 70095 2 99685 9 75128 3 04648c9 80161 3 0961 9 8613 3 13523 9 92689 3 16158c9 99247 3 18793 10 0626 3 20099 10 1333 3 19999v8 97187c10 1333 10 0855 9 32179 11 0818 8 21352 11 1896c6 94152 11 3138 5 86665 10 3136 5 86665 9 06666v3 19999c5 93732 3 20099 6 00748 3 18793 6 07307 3 16158c6 13865 3 13523 6 19834 3 0961 6 24867 3 04648c6 299 2 99685 6 33897 2 93772 6 36625 2 87252c6 39353 2 80731 6 40757 2 73734 6 40757 2 66666c6 40757 2 59598 6 39353 2 526 6 36625 2 4608c6 33897 2 39559 6 299 2 33646 6 24867 2 28684c6 19834 2 23721 6 13865 2 19809 6 07307 2 17173c6 00748 2 14538 5 93732 2 13232 5 86665 2 13332h3 73331zm3 73331 13 3333c3 66264 13 3323 3 59247 13 3454 3 52689 13 3717c3 46131 13 3981 3 40161 13 4372 3 35128 13 4868c3 30095 13 5365 3 26099 13 5956 3 23371 13 6608c3 20643 13 726 3 19238 13 796 3 19238 13 8667c3 19238 13 9373 3 20643 14 0073 3 23371 14 0725c3 26099 14 1377 3 30095 14 1969 3 35128 14 2465c3 40161 14 2961 3 46131 14 3352 3 52689 14 3616c3 59247 14 3879 3 66264 14 401 3 73331 14 4h12 2666c12 3373 14 401 12 4075 14 3879 12 4731 14 3616c12 5386 14 3352 12 5983 14 2961 12 6487 14 2465c12 699 14 1969 12 739 14 1377 12 7662 14 0725c12 7935 14 0073 12 8076 13 9373 12 8076 13 8667c12 8076 13 796 12 7935 13 726 12 7662 13 6608c12 739 13 5956 12 699 13 5365 12 6487 13 4868c12 5983 13 4372 12 5386 13 3981 12 4731 13 3717c12 4075 13 3454 12 3373 13 3323 12 2666 13 3333h3 73331z svg show code api reference component props table prop type default defaultvalue string name defaultvalue description the pressed state of the toggle group represented by an array of the values of all pressed toggle buttons this is the uncontrolled counterpart of value type string undefined value string name value description the pressed state of the toggle group represented by an array of the values of all pressed toggle buttons this is the controlled counterpart of defaultvalue type string undefined onvaluechange function name onvaluechange description callback fired when the pressed states of the toggle group changes type groupvalue string eventdetails togglegroup changeeventdetails void undefined loopfocus boolean true name loopfocus description whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys type boolean undefined default true multiple boolean false name multiple description when false only one item in the group can be pressed if any item in the group becomes pressed the others will become unpressed when true multiple items can be pressed type boolean undefined default false disabled boolean false name disabled description whether the toggle group should ignore user interaction type boolean undefined default false orientation orientation horizontal name orientation type horizontal vertical undefined default horizontal classname string function name classname description css class applied to the element or a function that returns a class based on the component s state type string state togglegroup state string undefined undefined style react cssproperties function name style description style applied to the element or a function that returns a style object based on the component s state type react cssproperties state togglegroup state react cssproperties undefined undefined render reactelement function name render description allows you to replace the component s html element with a different tag or compose it with another component accepts a reactelement or a function that returns the element to render type reactelement props htmlprops state togglegroup state reactelement undefined attribute data orientation indicates the orientation of the toggle group data disabled present when the toggle group is disabled data multiple present when the toggle group allows multiple buttons to be in the pressed state at the same time attribute description data orientation indicates the orientation of the toggle group data disabled present when the toggle group is disabled data multiple present when the toggle group allows multiple buttons to be in the pressed state at the same time togglegroup props hide re export of togglegroup props as togglegroupprops togglegroup state hide type togglegroupstate whether the component should ignore user interaction disabled boolean when false only one item in the group can be pressed if any item in the group becomes pressed the others will become unpressed when true multiple items can be pressed default false multiple boolean the orientation of the toggle group orientation horizontal vertical togglegroup changeeventreason hide type togglegroupchangeeventreason none togglegroup changeeventdetails hide type togglegroupchangeeventdetails the reason for the event reason none the native event associated with the custom event event event cancels base ui from handling the event cancel void allows the event to propagate in cases where base ui will stop the propagation allowpropagation void indicates whether the event has been canceled iscanceled boolean indicates whether the event is allowed to propagate ispropagationallowed boolean the element that triggered the event if applicable trigger element undefined