Input group

import * as React from 'react';
import { InputGroup, Surface, ToggleSwitch } from '@itwin/itwinui-react';

export default () => {
  const [option1, setOption1] = React.useState(true);
  const [option2, setOption2] = React.useState(false);

  return (
    <Surface>
      <InputGroup label='Toggle group' className='demo-input-group'>
        <ToggleSwitch
          onChange={(event) => setOption1(event.target.checked)}
          checked={option1}
          label='Toggle feature No.1'
        />
        <ToggleSwitch checked={true} disabled label='This you cannot change' />
        <ToggleSwitch
          onChange={(event) => setOption2(event.target.checked)}
          label='Toggle feature No.2'
          checked={option2}
        />
      </InputGroup>
    </Surface>
  );
};

import * as React from 'react';
import { InputGroup, Checkbox } from '@itwin/itwinui-react';

export default () => {
  const option1Label = 'Football';
  const option2Label = 'Hockey';
  const [option1, setOption1] = React.useState(true);
  const [option2, setOption2] = React.useState(false);
  const [allOptions, setAllOptions] = React.useState(false);
  const [isIndeterminate, setIsIndeterminate] = React.useState(true);
  React.useEffect(() => {
    if (option1 && option2) {
      setAllOptions(true);
      setIsIndeterminate(false);
      return;
    }
    if (option1 || option2) {
      setAllOptions(false);
      setIsIndeterminate(true);
    } else {
      setAllOptions(false);
      setIsIndeterminate(false);
    }
  }, [option1, option2]);
  const onAllChange = (value) => {
    setAllOptions(value);
    setIsIndeterminate(false);
    setOption1(value);
    setOption2(value);
  };
  return (
    <InputGroup label='Select your hobbies' message='Choose some hobbies'>
      <Checkbox
        onChange={(event) => onAllChange(event.target.checked)}
        label='Select all'
        indeterminate={isIndeterminate}
        checked={allOptions}
      />
      <Checkbox
        onChange={(event) => setOption1(event.target.checked)}
        label={option1Label}
        checked={option1}
      />
      <Checkbox
        onChange={(event) => setOption2(event.target.checked)}
        label={option2Label}
        checked={option2}
      />
    </InputGroup>
  );
};

import { InputGroup, Radio } from '@itwin/itwinui-react';

export default () => {
  return (
    <>
      <InputGroup label='Radio group' message='Tell me how happy you are'>
        <Radio name='choice' value='option1' label={'Very Happy'} />
        <Radio name='choice' value='option2' label={'Not Happy'} />
      </InputGroup>
    </>
  );
};