new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Shopify Polaris · all subjects

radio-button

15 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Radio button usage: single selection required

Radio buttons should be used where merchants must make a single selection from a list of options. Each radio button option must be independent and mutually exclusive from every other option in the list.

Radio button group requirements

A radio button group must include at least two or more choices. Options should be listed in a rational order that makes logical sense, and a default option should be selected whenever possible.

Radio button must have associated label

Radio buttons must always be used with an associated label component.

Radio button label content: capitalization

Radio button labels should start with a capital letter.

Radio button label content: punctuation

Radio button labels should not end in punctuation if the label is a single sentence, word, or fragment.

Radio button label introduction

Radio button labels should be introduced with a colon or a heading.

Toggle label clarity (iOS and Android)

Toggle labels should be clear about what merchants are enabling or disabling, should start with a capital letter, and toggle values should never be labeled.

Radio button disabled prop for accessibility

Use the `disabled` prop to apply the HTML `disabled` attribute to the radio button `<input>`. This prevents merchants from interacting with the radio button and conveys its inactive state to assistive technologies.

Radio button id prop requirement

Use the `id` prop to provide a unique `id` attribute value for each radio button. If an `id` is not provided, the component generates one. All radio buttons must have unique `id` values to work correctly with assistive technologies.

Radio button label prop for accessibility

The required `label` prop conveys the purpose of the radio button to all merchants.

Radio button labelHidden prop

Use the `labelHidden` prop to visually hide the label but make it available to assistive technologies.

Radio button keyboard navigation: focus

Move focus to the radio button group using the Tab key, or Shift + Tab when tabbing backwards.

Radio button keyboard navigation: selection

Use the up and down arrow keys to change which radio button is selected.

Radio button screen reader support

Screen readers convey the state of the radio button automatically.

Radio button web component name and location

The Radio button component is also available as the web component `s-choice-list` at https://shopify.dev/docs/api/app-home/polaris-web-components/forms/choicelist.

Give your agent this brain