How to change the Choice list component view side by side?

Polaris
1

Hello,

The default Choicelist Polaris component shows the choices from top to bottom. It is alright if the app UI has 2-3 choices, but say, for 13 choices, it takes a lot of top-to-bottom space. That is why I wanted them to stack side by side. Is there a way I can achieve this?

Any help and suggestions are appreciated.

import {ChoiceList} from '@shopify/polaris';
import {useState, useCallback} from 'react';

function SingleChoiceListExample() {
  const [selected, setSelected] = useState<string[]>(['hidden']);

  const handleChange = useCallback((value: string[]) => setSelected(value), []);

  return (
    <ChoiceList
      title="Company name"
      choices={[
        {label: 'Hidden', value: 'hidden'},
        {label: 'Optional', value: 'optional'},
        {label: 'Required', value: 'required'},
      ]}
      selected={selected}
      onChange={handleChange}
    />
  );
}

image
image918×251 8.53 KB

2

Found Radio Buttons. When it is implemented with InlineStack, it does the job.

Thanks.

3

Thanks for sharing your solution here @Bhupendra_Kumar , will be helpful if other folks stumble across the issue, appreciate you taking the time to update the thread :slight_smile:

1 Like