wix-style-react
Version:
87 lines (86 loc) • 3.75 kB
JavaScript
export default {
description:
'FormField is a layout component used to build form elements. It adds labels to form inputs and provides additional context.',
do: [
'Use it to provide a label for a form element',
'Use it to mark mandatory fields',
'Use it to provide additional information about the form element in a tooltip',
],
dont: [
"Don't use it as a title for sections or groups of elements, use the appropriate <Heading/> instead",
],
featureExamples: [
{
title: 'Structure',
description: `The FormField consists of a \`label\`, \`suffix\` and \`children\` areas.
Children areas accept any kind of form element.`,
example: '_structure',
},
{
title: 'Label Size',
description: `Control the label size with the \`labelSize\` prop. It supports 2 values:<br/>
- \`small\` (default) - use it in all common cases<br/>
- \`tiny\` - use it in dense layouts. It should be used with small input fields only.
`,
example: '_labelSize',
},
{
title: 'Label placement',
description: `Control the label position with the \`labelPlacement\` prop. It supports 3 values:<br/>
 - \`top\` - Use it in all common cases<br/>
 - \`left\` - Use it to save vertical space in less spacious layouts. Only works well with short labels. Be mindful of localization when using.<br/>
 - \`right\` - Use it for the toggle selection label`,
example: '_labelPlacement',
},
{
title: 'Label alignment',
description: `When the label is placed on the side, its vertical position can be controlled with the \`labelAlignment\` prop. It supports 2 options:<br/>
 - \`top\` - Use it for larger form elements like InputArea or RadioGroup.<br/>
 - \`middle\` - Use it for single line inputs.`,
example: '_labelAlignment',
},
{
title: 'Required',
description: `Mark mandatory fields with an asterix.<br/><br/>
Tip: When the majority of fields are mandatory, write “optional” where it’s appropriate in the label instead.`,
example: '_required',
},
{
title: 'Additional Info',
description: `Provide more information about the field with a message in a tooltip.`,
example: '_additionalInfo',
},
{
title: 'Suffix',
description: `Add a custom element above the form item to provide extra content or messaging.
The area accepts any component as a child.<br/><br/>
Note: the suffix area replaces the character count - they can’t be used simultaneously.
`,
example: '_suffix',
},
{
title: 'Character count',
description: `Defines the maximum length of the field value by using the \`charCount\` prop.`,
example: '_characterCount',
},
{
title: 'Stretch Content',
description: `Control the container width with \`stretchContent\`. This property is enabled by default, but has to be turned off when the form element has a fixed width, i.e. when a ToggleSwitch is used.`,
example: '_stretchContent',
},
],
commonUseCaseExamples: [
{
title: 'Regular form',
description: `Use top label placement for forms whenever possible for a clearer hierarchy and better readability.`,
example: '_regularForm',
},
{
title: 'Side labels for multiple fields',
description: `Use them to build a form from various input and selection elements with different length labels.
All field labels may need to be moved to a separate column using \`<Layout/>\`.
This will ensure that form elements align with the left side.`,
example: '_sideLabels',
},
],
};