wix-style-react
Version:
88 lines (87 loc) • 4.06 kB
JavaScript
export default {
description:
'Number input allows users to enter and edit numeric values in a single line input field. The value can be adjusted using keyboard or incrementer arrows.',
do: [
'Use it to enter custom numeric values, e.g., amount, price, quantity.',
'Use it to adjust values by a specific amount e.g., number of items in a shopping cart.',
],
dont: [
'Don’t use it to enter custom and unique numeric values, i.e., phone number, postal code. Use regular <Input/> instead.',
'Don’t use it to enter dates and times. Use <DatePicker/> and <TimeInput/> instead.',
],
featureExamples: [
{
title: 'Size',
description: `Adjust the component size using \`size\` prop. It supports 3 sizes:<br/>
 - \`large\` - use it in onboarding flows, where input needs emphasis.<br/>
 - \`medium\` (default) - use it in all common cases.<br/>
 - \`small\` - use it in more dense and narrow layouts.`,
example: '_size',
},
{
title: 'Border',
description: `Style the component using \`border\` prop. It supports 3 styles:<br/>
 - \`standart\` (default) - use it in forms.<br/>
 - \`round\` - use it when input is built for filtering.<br/>
 - \`bottomLine\` - use it as a title which can be edited onclick.`,
example: '_border',
},
{
title: 'Status',
description: `Control component status using \`status\` prop. It supports 3 states:<br/>
 - \`error\` - use it to highlight an invalid input value.<br/>
 - \`warning\` - use it to highlight a value that impacts business or can’t be validated.<br/>
 - \`loading\` - use it to show the value is being uploaded to the server.`,
example: '_status',
},
{
title: 'Status Message',
description: `Explain the status with \`statusMessage\` prop. The message is revealed when a user hovers over the status icon.
The placement of the tooltip is controlled with \`tooltipPlacement\` prop.`,
example: '_statusMessage',
},
{
title: 'Affix',
description: `Support input value with additional information added to \`prefix\` and \`suffix\` props.
Props can contain text, icons and even buttons.`,
example: '_affix',
},
{
title: 'Read-Only and Disabled',
description: `Control input interaction with:<br/>
 - \`readOnly\` - disables writing new values, but allows you to copy the current value.<br/>
 - \`disabled\` - disables all input interactions. Use it to highlight unavailable functions.`,
example: '_readOnlyAndDisabled',
},
{
title: 'Clear Button',
description: `Enable a button that clears input value by using \`clearButton\` prop.
Show it when the input value is optional or often has to be cleared, e.g., in date and search inputs.`,
example: '_clearButton',
},
{
title: 'Stepper',
description: `Specify incremented step intervals with \`step\` prop. Arrows on the right side of the field can be hidden with \`hideStepper\`.
When the arrows are hidden, a step can still be applied when the field value is changed via arrow keys.`,
example: '_stepper',
},
{
title: 'Min and Max Values',
description: `Define the range of accepted values with \`min\` and \`max\` properties.
Display an error message when the limit is exceeded or round values outside of the range to the nearest accepted number with \`strict\` prop.`,
example: '_minMax',
},
],
commonUseCaseExamples: [
{
title: 'Compound Input',
description: `Stack items with \`<Box/>\` when fields represent the same data or value change in one of them affect the other one.`,
example: '_compoundInput',
},
{
title: 'Disabled Stepper',
description: `Use strict number input to protect users from entering invalid values.`,
example: '_disabledStepper',
},
],
};