## 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 saltVeganVegetarianGluten freeOrganicSpicyVisible on siteIn 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(Number(option.id))}
selectedId={selectedOption}
/>
setToggleChecked(!toggleChecked)}
/>
);
};
```