Vertical ToggleButtonGroup in React?

user_10321138 0
Viewed 96

Is there a way to make ToggleButtonGroups display buttons vertically instead of horizontally? I have tried changing the orientation="vertical" but that doesn't seem to have any effect.

    import ToggleButtonGroup from "react-bootstrap/ToggleButtonGroup";
    import ToggleButton from "react-bootstrap/ToggleButton";
    function App() {
      return (
        <>
          <h1>Some question ?</h1>
          <ToggleButtonGroup orientation="vertical" type="checkbox">
              <ToggleButton id="tbg-check-1" value={1}>
                Option 1{" "}
              </ToggleButton>{" "}
              <ToggleButton id="tbg-check-2" value={2}>
                Option 2{" "}
              </ToggleButton>{" "}
              <ToggleButton id="tbg-check-3" value={3}>
                Option 3{" "}
              </ToggleButton>{" "}
              </ToggleButtonGroup>
        </>
  );
}

export default App;

ToggleButtonGroup displaying horizontal buttons

react-bootstrap reactjs button layout
1 Answers

Note: you need to check package.json maybe you are missing some library which cause this otherwise you are doing it the right way

Please check this URL

click here this link contains both horizental and vertical design

import React from 'react';
import { ToggleButtonGroup, ToggleButton } from '@mui/material';

export default function App() {
  return (
    <div>
      <>
        <h1>Vertical ?</h1>
        <ToggleButtonGroup orientation="vertical" type="checkbox">
          <ToggleButton id="tbg-check-1" value={1}>
            Option 1{' '}
          </ToggleButton>{' '}
          <ToggleButton id="tbg-check-2" value={2}>
            Option 2{' '}
          </ToggleButton>{' '}
          <ToggleButton id="tbg-check-3" value={3}>
            Option 3{' '}
          </ToggleButton>{' '}
        </ToggleButtonGroup>
      </>

      <>
        <h1>Horizental?</h1>
        <ToggleButtonGroup orientation="horizental" type="checkbox">
          <ToggleButton id="tbg-check-1" value={1}>
            Option 1{' '}
          </ToggleButton>{' '}
          <ToggleButton id="tbg-check-2" value={2}>
            Option 2{' '}
          </ToggleButton>{' '}
          <ToggleButton id="tbg-check-3" value={3}>
            Option 3{' '}
          </ToggleButton>{' '}
        </ToggleButtonGroup>
      </>
    </div>
  );
}
user_170809370
Related