wix-style-react
Version:
84 lines (83 loc) • 3.82 kB
JavaScript
export default {
description:
'Radio group allows users to select a single item from a list of mutually exclusive options. All possible options are exposed up front for comparison.',
do: [
'Use it to select a single item from a short list of options (i.e., 2-5 items).',
'Use it to expose all available options.',
'Have a default selected option where possible or add a neutral option as a first item, i.e., ‘None’.',
],
dont: [
'Don’t use it when multiple options can be selected. Use <Checkbox/> instead.',
'Don’t use it to select an item from more than 5 options. Use <Dropdown/> or <Autocomplete/> instead',
],
featureExamples: [
{
title: 'Structure',
description: `The component consists of a list of radios wrapped inside \`<RadioGroup>\` tag.
By default option labels are plain text but they can be overridden by any other component or a set of components.`,
example: '_structure',
},
{
title: 'Display',
description: `Control the layout of options with \`display\` prop. It supports 2 layouts:<br/>
 - \`vertical\`(default) - use it in all common cases<br/>
 - \`horizontal\` - use it to display 2-3 options with short labels (i.e. Yes/No selections in a form)`,
example: '_display',
},
{
title: 'Spacing',
description: `Control the space between options in pixels with \`spacing\` prop.`,
example: '_spacing',
},
{
title: 'Vertical Alignment',
description: `Control radio alignment to a label with \`vAlign\` prop. It accept 2 values:<br/>
 - \`center\`(default) - use it in all common cases.<br/>
 - \`top\` - use it to align radios to the top for options that might go over 3 or more rows of text.`,
example: '_verticalAlignment',
},
{
title: 'Disabled',
description: `Disable all interactions with following props:<br/>
 - \`disabled\` - use it to restrict interactions for the whole group at once.<br/>
 - \`disabledRadios\` - use it to specify an array of options that should be disabled.`,
example: '_disabled',
},
{
title: 'Selection Area',
description: `Emphasise a clickable area with selection area. This feature should be always used in mobile layout. Control design with:<br/>
 - \`selectionArea\` - use it to specify whether to display area on hover, always or not display it at all.<br/>
 - \`selectionAreaSkin\` - use to specify which design to use: filled or outlined.<br/>
 - \`selectionAreaPadding\` - use it to define white space around the radio in pixels.`,
example: '_selectionArea',
},
{
title: 'Content',
description: `Attach related details to an option via content prop.
It accepts any kind of content and places it outside of a bounding box of a radio list item.`,
example: '_content',
},
],
commonUseCaseExamples: [
{
title: 'Neutral Option',
description: `Have a default option selected whenever possible or introduce a neutral option, i.e., ‘None’, ‘All’.`,
example: '_neutralOption',
},
{
title: 'Additional Info',
description: `Use \`<InfoIcon/>\` to provide additional information about the selection.`,
example: '_additionalInfo',
},
{
title: 'Horizontal Direction',
description: `Use horizontal layout of a radio group for selections that have 2-3 short options to choose from in places where vertical space is limited.`,
example: '_horizontalDirection',
},
{
title: 'Custom Label',
description: `Any component or a set of them can be passed as a radio option label.`,
example: '_customLabel',
},
],
};