wix-style-react
Version:
65 lines (64 loc) • 3.2 kB
JavaScript
export default {
description:
'You can select single or multiple items from a list of predefined options using checkboxes',
do: [
'Use it in forms to select multiple items from a list of individual options.',
'Use it when all options need to be displayed right away.',
'Use it when an explicit action is required to apply a setting, e.g., agree to terms and conditions.',
],
dont: [
'Don’t use it to select a single item from a list. Use <RadioGroup/> instead.',
'Don’t use it to activate a setting or a feature. Use <ToggleSwitch/> instead.',
'Don’t use it to select more than 5-10 options, use <MultiSelectCheckbox/>, <MultiSelect/> or <SelectorList/> instead.',
],
featureExamples: [
{
title: 'Size',
description: `Adjust the component size using \`size\` prop. It supports 2 sizes:<br/>
 - \`medium\` (default) - use in all common cases.<br/>
 - \`small\` - use in more dense layouts.<br/>`,
example: '_size',
},
{
title: 'State',
description: `Set the checkbox state with:<br/>
 - \`checked\` - use it to mark the selected item.<br/>
 - \`indeterminate\` - use it to represent mixed value for bulk selection checkbox (both selected and not selected values included)s.<br/>
 - \`hasError\` - use it to indicate that selection has to be made to move forward or value is invalid.<br/>
 - \`disabled\` - use it to highlight that a selection exists but it’s not available at that time.<br/>`,
example: '_state',
},
{
title: 'Vertical alignment',
description: `Control checkbox alignment with a label using \`vAlign\` prop. It supports 2 values:<br/>
 - \`center\` (default) - use it in all common cases.<br/>
 - \`top\` - use it to align the checkbox to the top to handle text overflow.<br/>`,
example: '_verticalAlignment',
},
{
title: 'Selection area',
description: `Emphasize the clickable area with a selection area. Control the style with:<br/>
 - \`selectionArea\` - use it to specify whether to display an area on hover, always or not display it at all.<br/>
 - \`selectionAreaSkin\` - use to specify which design to use: filled or outline.<br/>
 - \`selectionAreaPadding\` - use it to define white space around the checkbox in pixels.<br/>`,
example: '_selectionArea',
},
{
title: 'Tooltip',
description: `Explain the checkbox select option within a tooltip. Pass the message with \`tooltipContent\` prop, control the design with \`tooltipProps\` -- it accepts all standard \`<Tooltip/>\` properties.`,
example: '_tooltip',
},
],
commonUseCaseExamples: [
{
title: 'Forms',
description: `Use checkboxes in a form to expose all available options right away.`,
example: '_forms',
},
{
title: 'Custom labels',
description: `Checkbox accepts any component as it’s label. Make sure to use items with clear textual labels, or elements that are self explanatory in the given context.`,
example: '_customLabels',
},
],
};