## Feature Examples ### Structure - description:

A form field consists of label, suffix and children areas. Children areas can include any kind of form element.

- example: ```jsx Suffix area } > Any form element ; ``` ### Label placement - description:

Control the label position with the labelPlacement prop. It supports 3 options:

  • Use top in all common cases.
  • Use left to save vertical space in less spacious layouts. This only works well with short labels. When using, be mindful of localization.
  • For , use right.
    • - example: ```jsx ; ``` ### Label alignment - description:

    When the field label is placed on the side, its vertical position can be controlled with the labelAlignment prop. It supports 2 options:

  • For larger form elements like or , use top.
  • Use middle for single line inputs.
    • - example: ```jsx ; ``` ### Required - description:

    Mark mandatory fields with an asterisk by using required.

    - example: ```jsx ; ``` ### Status and message - description:

    To change the status and display an inline message below any component, use the status and statusMessage props.

  • For error messages, set the status prop to error.
  • For warning messages, set the status prop to warning.
  • For loading messages, set the status prop to loading.
  • To show helper text, use the statusMessage prop with no status.
    • - example: ```jsx ; ``` ### Additional info - description:

    Use a tooltip to provide users with more information about the field and what they need to input.

    - example: ```jsx ; ``` ### Suffix - description:

    Add a custom element on the top right of the input to provide more options or information. This area accepts any component as a child.

    Note: The suffix area replaces the character count; they can’t be used simultaneously.

    - example: ```jsx }> Go to External Site } > ; ``` ### Character count - description:

    Define the maximum length of the field value by using the charCount prop. Any value over the allowed character count will not be added.

    - example: ```jsx () => { const [charCount, setCharCount] = React.useState(0); const [value, setValue] = React.useState(''); const handleOnChange = value => { if (value.length <= 20) { setValue(value); setCharCount(value.length); } }; return ( handleOnChange(event.target.value)} /> ); }; ``` ### Stretch content - description:

    Control the container width with stretchContent. This property is enabled by default and must be turned off when the form element has a fixed width, like when a is used.

    - example: ```jsx ; ``` ### Text overflow - description:

    Use the ellipsis prop for overflow text. The full text will be displayed in a when a user hovers over the button. Control the style of the tooltip using the tooltipProps.

    To display label in multiple lines, use maxLines to define how many lines should be visible. maxLines can be used together with ellipsis to control after how many lines label would get truncated.

    NOTE: it's not recommended to have labels longer than two lines, as the content would become too text heavy.

    - example: ```jsx ; ``` ## Common Use Case Examples ### Regular form - description:

    Use a top label on forms whenever possible. This creates a clear hierarchy and is the most readable format.

    - example: ```jsx $} /> No salt Vegan Vegetarian Gluten free Organic Spicy Visible on site In stock ; ``` ### Settings panel - description:

    Use a top label or a left label depending on the layout. For example, a left label works best with a single toggle button.

    - example: ```jsx () => { const [selectedOption, setSelectedOption] = React.useState(0); const [value, setValue] = React.useState(2); const [toggleChecked, setToggleChecked] = React.useState(true); const options = [ { id: 0, value: 'Image' }, { id: 1, value: 'Video' }, { id: 2, value: 'Image and video' }, { id: 3, value: 'Document' }, { id: 4, value: 'Audio' }, ]; return ( setSelectedOption(option.id)} selectedId={selectedOption} />
    setValue(e.target.value)} />
    setToggleChecked(!toggleChecked)} />     ); }; ```