ToggleButtonGroup

Denne komponenten er under aktiv utvikling, og vi trenger din feedback!

Er du eventyrlysten, test den og kom med innspill til oss på Slack.

Om komponenten

ToggleButtonGroup er en gruppe knapper som slås av og på. Den brukes til å bytte visning eller justere innhold som allerede vises på siden, for eksempel liste eller kart.

Egnet til:

Å bytte mellom visninger av det samme innholdet, som liste og kart.
Valg som oppdaterer innholdet med en gang, for eksempel rentetype i en kalkulator.

Uegnet til:

Valg i et skjema som sendes inn. Bruk heller RadioGroup eller CheckboxGroup.
Å bytte mellom innholdspaneler med ulikt innhold. Bruk heller Tabs.
Mange valg som må brytes over flere linjer, som filtre. Bruk heller TagGroup.

Eksempler

Gruppen har ingen synlig label, så gi den en aria-label eller aria-labelledby. Enkeltvalg er standard. Bruk disallowEmptySelection når ett valg alltid må være aktivt.

<UNSAFE_ToggleButtonGroup
  aria-label="Rentetype"
  defaultSelectedKeys={['fixed']}
  disallowEmptySelection
>
  <UNSAFE_ToggleButton id="fixed">
    <Lock />
    Fastrente
  </UNSAFE_ToggleButton>
  <UNSAFE_ToggleButton id="floating">
    <ArrowsRightLeft />
    Flytende rente
  </UNSAFE_ToggleButton>
</UNSAFE_ToggleButtonGroup>

Med selectionMode="multiple" kan flere knapper være valgt samtidig.

<UNSAFE_ToggleButtonGroup
  aria-label="Vis i kartet"
  selectionMode="multiple"
  defaultSelectedKeys={['schools', 'transit']}
>
  <UNSAFE_ToggleButton id="schools">
    <School />
    Skoler
  </UNSAFE_ToggleButton>
  <UNSAFE_ToggleButton id="transit">
    <Bus />
    Kollektiv
  </UNSAFE_ToggleButton>
  <UNSAFE_ToggleButton id="shops">
    <ShoppingBag />
    Butikker
  </UNSAFE_ToggleButton>
</UNSAFE_ToggleButtonGroup>

Varianter

Kun ikon

Sett isIconOnly for kvadratiske knapper, og gi hver knapp en aria-label, siden de ikke har synlig tekst.

<UNSAFE_ToggleButtonGroup aria-label="Visning" defaultSelectedKeys={['list']}>
  <UNSAFE_ToggleButton id="list" aria-label="Liste" isIconOnly>
    <List />
  </UNSAFE_ToggleButton>
  <UNSAFE_ToggleButton id="map" aria-label="Kart" isIconOnly>
    <MapPin />
  </UNSAFE_ToggleButton>
  <UNSAFE_ToggleButton id="calendar" aria-label="Kalender" isIconOnly>
    <Calendar />
  </UNSAFE_ToggleButton>
</UNSAFE_ToggleButtonGroup>

Deaktivert

Deaktiverte knapper og grupper skjules helt, siden Grunnmuren unngår deaktiverte tilstander. Setter du isDisabled på en knapp, vises den ikke. Setter du det på gruppen, vises ingenting.

<UNSAFE_ToggleButtonGroup aria-label="Visning" defaultSelectedKeys={['list']}>
  <UNSAFE_ToggleButton id="list">
    <List />
    Liste
  </UNSAFE_ToggleButton>
  <UNSAFE_ToggleButton id="map" isDisabled>
    <MapPin />
    Kart
  </UNSAFE_ToggleButton>
</UNSAFE_ToggleButtonGroup>

Kontrollert

Bruk selectedKeys og onSelectionChange når du håndterer state selv.

function () {
  const [selectedKeys, setSelectedKeys] = React.useState(new Set(['fixed']));

  return (
    <div className="grid gap-4">
      <UNSAFE_ToggleButtonGroup
        aria-label="Rentetype"
        selectedKeys={selectedKeys}
        onSelectionChange={setSelectedKeys}
        disallowEmptySelection
      >
        <UNSAFE_ToggleButton id="fixed">
          <Lock />
          Fastrente
        </UNSAFE_ToggleButton>
        <UNSAFE_ToggleButton id="floating">
          <ArrowsRightLeft />
          Flytende rente
        </UNSAFE_ToggleButton>
      </UNSAFE_ToggleButtonGroup>
      <p>Valgt: {Array.from(selectedKeys).join(', ')}</p>
    </div>
  );
}

Props

ToggleButtonGroup

Prop	Description	Default
`children?`		-
`isDisabled?`		-
`render?`		-
`orientation?`	The orientation of the the toggle button group.	'horizontal'
`selectionMode?`		'single'
`disallowEmptySelection?`		-
`selectedKeys?`		-
`defaultSelectedKeys?`		-
Events
`onSelectionChange?`		-
Styles
`style?`		-
`className?`	CSS classes to apply to the group	-
Accessibility
`aria-describedby?`		-
`aria-details?`		-
`aria-label?`		-
`aria-labelledby?`		-

ToggleButton

Prop	Description	Default
`autoFocus?`		-
`isDisabled?`		-
`preventFocusOnPress?`		-
`excludeFromTabOrder?`		-
`render?`		-
`defaultSelected?`	Whether the element should be selected (uncontrolled).	-
`isSelected?`	Whether the element should be selected (controlled).	-
`isIconOnly?`	When the button has a single icon and no text. Makes the button square.	false
`id`	Unique key of the button within its group. Used for `selectedKeys`.	-
`children`	Text, icon and text, or only an icon. An icon-only button needs an `aria-label`.	-
Events
`onFocus?`	Handler that is called when the element receives focus.	-
`onBlur?`	Handler that is called when the element loses focus.	-
`onChange?`	Handler that is called when the element's selection state changes.	-
`onKeyDown?`	Handler that is called when a key is pressed.	-
`onKeyUp?`	Handler that is called when a key is released.	-
`onClick?`	Not recommended – use `onPress` instead. `onClick` is an alias for `onPress` provided for compatibility with other libraries. `onPress` provides additional event details for non-mouse interactions.	-
`onPress?`	Handler that is called when the press is released over the target.	-
`onPressStart?`	Handler that is called when a press interaction starts.	-
`onPressEnd?`	Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.	-
`onPressChange?`	Handler that is called when the press state changes.	-
`onPressUp?`	Handler that is called when a press is released over the target, regardless of whether it started on the target or not.	-
`onFocusChange?`	Handler that is called when the element's focus status changes.	-
`onHoverStart?`	Handler that is called when a hover interaction starts.	-
`onHoverEnd?`	Handler that is called when a hover interaction ends.	-
`onHoverChange?`	Handler that is called when the hover state changes.	-
Styles
`style?`		-
`className?`	CSS classes to apply to the button	-
Accessibility
`aria-controls?`		-
`aria-describedby?`		-
`aria-details?`		-
`aria-disabled?`		-
`aria-expanded?`		-
`aria-haspopup?`		-
`aria-label?`		-
`aria-labelledby?`		-
`aria-pressed?`		-