wix-style-react
Version:
50 lines (49 loc) • 1.95 kB
JavaScript
export default {
description:
'Toggle Switch allow users to switch between two possible states. They are commonly used to turn a specific setting on or off.',
do: [
'Use it to control the state of an item.',
'Use it to turn a setting or a function on or off.',
'Use it when change takes an instant effect.',
],
dont: [
'Don’t use it to choose multiple options from the list of related items. Use <Checkbox/> instead.',
],
featureExamples: [
{
title: 'Size',
description: `Adjust the component size using \`size\` prop. It supports 3 sizes:<br/>
 - \`large\` (default) - use in form layouts.<br/>
 - \`medium\` - use in card header and other dense layouts.<br/>
 - \`small\` - use in more dense layouts.<br/>`,
example: '_size',
},
{
title: 'Skin',
description: `Style the component using \`skin\` prop. It supports 3 skins:<br/>
 - \`standard\` (default) - use in all common cases.<br/>
 - \`success\` - use it to highlight that a toggle is ‘available’ or ‘successfully working’.<br/>
 - \`error\` - use it to highlight that value is destructive or invalid.<br/>`,
example: '_skin',
},
{
title: 'States',
description: `Identify \`state\` of a field with:<br/>
 - \`checked\` - use it to mark the enabled state of a setting.<br/>
 - \`disabled\` - use it to disable all interactions and highlight unavailable functions.`,
example: '_states',
},
],
commonUseCaseExamples: [
{
title: 'Settings',
description: `Use toggle switch to turn on or off a setting.`,
example: '_settings',
},
{
title: 'Part of a Form',
description: `Use a toggle switch to control the state of an item. Wrap switch with a \`<FormField/>\` to provide a label.`,
example: '_partOfAForm',
},
],
};