npm package: @highlight-ui/sandbox-form-field
Description: This is the FormField and FormFieldView component used in Personio
Author: Personio GmbH & Co. KG
Latest version: 7.2.15

[![npm](https://img.shields.io/npm/v/@highlight-ui/sandbox-form-field)](https://www.npmjs.com/package/@highlight-ui/sandbox-form-field)
[![personio.design](https://img.shields.io/static/v1?label=Personio&message=zeroheight&color=yellow)](https://www.personio.design/40d648a47/v/0/p/203b79-form-field/b/61d4aa)
[![storybook.personio.design](https://img.shields.io/static/v1?label=Personio&message=storybook&color=red)](https://storybook.personio.design/?path=/story/forms-and-input-form-field-formfield--vertical-story)

# @highlight-ui/sandbox-form-field

## Installation

Using npm:

```bash
npm install @highlight-ui/sandbox-form-field
```

Using yarn:

```bash
yarn add @highlight-ui/sandbox-form-field
```

Using pnpm:

```bash
pnpm install @highlight-ui/sandbox-form-field
```

In your (S)CSS file:

```scss
@import url('@highlight-ui/sandbox-form-field');
```

Once the package is installed, you can import the library:

```ts
import {
  FormField,
  FormFieldView,
  InputFormField,
  SelectFormField,
  TextAreaFormField,
} from '@highlight-ui/sandbox-form-field';
```

## Usage

```tsx
import React, { useState } from 'react';
import { FormField } from '@highlight-ui/sandbox-form-field';

export default function FormFieldExample() {
  return (
    <FormField
      label="Input Field"
      htmlFor="input-123"
      hintText="Optional Help Text"
    >
      <Input id="input-123" type="text" placeholder="Type something here" />
    </FormField>
  );
}
```

## Props 📜

### FormField

| Prop                        | Type                                               | Required | Default | Description                                                    |
| :-------------------------- | :------------------------------------------------- | :------- | :------ | :------------------------------------------------------------- |
| `children`                  | `React.ReactNode`                                  | Yes      |         | The content inside the form field                              |
| `label`                     | `string`                                           | Yes      |         | Label for the input field                                      |
| `horizontal`                | `boolean`                                          | No       | `false` | Whether to use the horizontal layout of the form field         |
| `htmlFor`                   | `string`                                           | No       |         | Specify which HTML element the Label is for                    |
| `labelTooltipContent`       | `TooltipProps['content']`                          | No       |         | The content to be displayed in the tooltip pop-out             |
| `labelTooltipMouseOutDelay` | `TooltipProps['mouseOutDelay']`                    | No       |         | How quickly to hide the tooltip                                |
| `helperText`                | `React.ReactNode`                                  | No       |         | The text that will be displayed as a secondary label           |
| `hintText`                  | `string`                                           | No       |         | The grayed out, additional to the `helperText` information.    |
| `validationsId`             | `string`                                           | No       |         | The id of the validation info wrapper                          |
| `validations`               | `Array<Omit<ValidationMessageProps, 'className'>>` | No       |         | An array of objects that represent different validation states |

### FormFieldView

| Prop          | Type              | Required | Default | Description                                            |
| :------------ | :---------------- | :------- | :------ | :----------------------------------------------------- |
| `children`    | `React.ReactNode` | Yes      |         | The content inside the form field view                 |
| `label`       | `string`          | Yes      |         | Label for the field view                               |
| `horizontal`  | `boolean`         | No       | `false` | Whether to use the horizontal layout of the form field |
| `placeholder` | `string`          | No       | `-`     | The placeholder value                                  |

### InputFormField

> The following props build on the FormField props listed above

| Prop         | Type                                | Required | Default | Description                                                                                                                                                                          |
| :----------- | :---------------------------------- | :------- | :------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `id`         | `string`                            | No       |         | The id applied to the input element                                                                                                                                                  |
| `inputProps` | `Omit<InputProps, 'outline' 'ref'>` | No       |         | The [InputProps](https://gitlab.personio-internal.de/personio/platform/highlight-ui/-/blob/master/packages/ui/input/src/Input.tsx#L7) to pass down to the underlying Input component |

### SelectFormField

> The following props build on the FormField props listed above

| Prop          | Type                                        | Required | Default | Description                                                                                                                                                                                   |
| :------------ | :------------------------------------------ | :------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `selectProps` | `Omit<SelectProps<T>, 'outline' 'variant'>` | Yes      |         | The [SelectProps](https://gitlab.personio-internal.de/personio/platform/highlight-ui/-/blob/master/packages/ui/select/src/BasicSelect.tsx#L9) to pass down to the underlying Select component |
| `id`          | `string`                                    | No       |         | The id applied to the select element                                                                                                                                                          |

### TextAreaFormField

> The following props build on the FormField props listed above

| Prop            | Type                             | Required | Default | Description                                                                                                                                                                                    |
| :-------------- | :------------------------------- | :------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `id`            | `string`                         | No       |         | The id applied to the select element                                                                                                                                                           |
| `textAreaProps` | `Omit<TextAreaProps, 'outline'>` | No       |         | The [TextAreaProps](https://gitlab.personio-internal.de/personio/platform/highlight-ui/-/blob/master/packages/ui/input/src/TextArea.tsx#L11) to pass down to the underlying TextArea component |

## Contributing 🖌️

Please visit [personio.design](https://www.personio.design/40d648a47/v/0/p/203b79-form-field/b/61d4aa) for usage guidelines and visual examples.

If you're interested in contributing, please visit our [contribution page](https://www.personio.design/40d648a47/v/0/p/138faf-about-the-process).