Skip to main content

ToggleButton.Group

Toggle group allows to control a group of toggle buttons. It doesn't change the appearance of the toggle buttons. If you want to group them in a row, check out ToggleButton.Row.

Usage​

import * as React from 'react';
import { ToggleButton } from 'react-native-paper';

const MyComponent = () => {
  const [value, setValue] = React.useState('left');

  return (
    <ToggleButton.Group
      onValueChange={value => setValue(value)}
      value={value}>
      <ToggleButton icon="format-align-left" value="left" />
      <ToggleButton icon="format-align-right" value="right" />
    </ToggleButton.Group>
  );
};

export default MyComponent;

Props​

onValueChange (required)​

Type: (value: Value) => void

Function to execute on selection change.

value (required)​

Type: Value | null

Value of the currently selected toggle button.

children (required)​

Type: React.ReactNode

React elements containing toggle buttons.