Choice list
A choice list lets you create a list of grouped radio buttons or checkboxes. Use this component if you need to group together a related list of interactive choices.
Allows merchants to select one option from a list. Make sure all options are an either/or choice.
import{ChoiceList}from'@shopify/polaris';import{useState,useCallback}from'react';functionSingleChoiceListExample(){const[selected,setSelected]=useState(['hidden']);consthandleChange=useCallback((价值)=>setSelected(价值),[]);return(<ChoiceList title="Company name"choices={[{label:'Hidden',价值:'hidden'},{label:'Optional',价值:'optional'},{label:'Required',价值:'required'},]}selected={selected}onChange={handleChange}/>);}Props
Want to help make this feature better? Pleaseshare your feedback.
- title React.ReactNode
-
Label for list of choices.
- choices []
-
Collection of choices.
- selected string[]
-
Collection of selected choices.
- name? string
-
表单输入。
- allowMultiple? boolean
-
Allow merchants to select multiple options at once.
- titleHidden? boolean
-
Toggles display of the title.
- error? any
-
Display an error message.
- disabled? boolean
-
Disable all choices *.
- onChange? (selected:string[],name:string) =>void
-
Callback when the selected choices change.
Best practices
Choice lists should:
- Include a title that tells merchants what to do or explains the available options
- Label options clearly based on what the option will do
- 避免相互排斥的选项时允许μltiple selection
Content guidelines
List titles
List titles should:
- Help merchants understand how the items in the list are grouped together, or should explain what kind of choice merchants are making
Do
Pick a shipping method
Don’t
Pick one
是简洁and scannable
- Use simple, clear language that can be read at a glance
- Keep list titles to a single sentence
- It the title introduces the list, it should end with a colon
- Should be written in sentence case
Do
Shipping options
Don’t
Shipping Options
Not use colons
Do
If the customer abandons their checkout, send them an email reminder to complete their order:
- Option a
- Option b
Don’t
If the customer abandons their checkout, send them an email reminder to complete their order
- Option a
- Option b
List choices
Every item in a choice list should:
- Start with a capital letter
- Not use commas or semicolons at the end of each line
- Be written in sentence case (the first word capitalized, the rest lowercase)
Do
- Option 1
- Yellow
- Item three
Don’t
- option 1
- Yellow;
- Item Three
Helper text and descriptions
If your list contains helper text, only the description below the list item should contain punctuation.
Related components
- To present a long list of radio buttons or when space is constrained,use the select component
- To build a group of radio buttons or checkboxes with a custom layout, use theradio button componentorcheckbox component
- To display a simple, non-interactive list of related content,use the list component
Accessibility
The choice list component uses the accessibility features of thecheckboxandradio buttoncomponents.