wix-style-react/src/Radio/docs/Radio.content.js

wix-style-react

export default {
  description:
    'A radio represents an item in a single selection list. It is used as an internal part of \`<RadioGroup/>\`, but can be used as a standalone item in a custom form or layout.',
  do: ['Use it to recreate <RadioGroup/> in a custom design.'],
  dont: [
    'Don’t use it to display a regular list of single selection options. Use <RadioGroup/> instead.',
  ],
  featureExamples: [
    {
      title: 'Structure',
      description: `The component consists of a radio and label that represents the selection value.
        By default \`label\` is a text string but can be overridden to any other component or a set of components.`,
      example: '_structure',
    },
    {
      title: 'States',
      description: `Control the state of a component with:<br/>
        &emsp;- \`checked\` - use it to mark an active selection.<br/>
        &emsp;- \`disabled\` - use it to mark an item that cannot be selected.`,
      example: '_states',
    },
    {
      title: 'Alignment',
      description: `Control radio alignment to a label with \`alignItems\` prop. It supports 2 values:<br/>
        &emsp;- \`center\` (default) - use it in all common cases.<br/>
        &emsp;- \`top\` - use it to align a radio to the top to handle text overflow.`,
      example: '_alignment',
    },
  ],
  commonUseCaseExamples: [
    {
      title: 'Custom Label',
      description: `Any component or a set of components can be passed as a radio option label.`,
      example: '_customLabel',
    },
    {
      title: 'Additional Info',
      description: `Use \`<InfoIcon/>\` to provide additional information about a selection.`,
      example: '_additionalInfo',
    },
    {
      title: 'Custom Layout',
      description: `A radio can be used to build custom selection lists using \`<Card>\` as a base for each option.`,
      example: '_customLayout',
    },
  ],
};