React Components

# Form Field

## Overview

---

To learn more about **Form Field** usage, please refer to the .

## Anatomy

---

FormField

FormFieldError

FormFieldHelper

FormFieldLabel

FormFieldLabelSubLabel

---

## FormField

---

| Property | Type | Required | Default value | Description |
| --- | --- | --- | --- | --- |
| This component extends all the native [div attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/div#attributes) . |
| 
id

 | `string` | - | `undefined` | The field id. |
| 

invalid

 | `boolean` | - | `undefined` | Whether the component is in error state. |

## FormFieldError

---

| Property | Type | Required | Default value | Description |
| --- | --- | --- | --- | --- |
| This component extends all the native [span attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/span#attributes) . |

## FormFieldHelper

---

| Property | Type | Required | Default value | Description |
| --- | --- | --- | --- | --- |
| This component extends all the native [span attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/span#attributes) . |

## FormFieldLabel

---

| Property | Type | Required | Default value | Description |
| --- | --- | --- | --- | --- |
| This component extends all the native [label attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/label#attributes) . |

## FormFieldLabelSubLabel

---

| Property | Type | Required | Default value | Description |
| --- | --- | --- | --- | --- |
| This component extends all the native [span attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/span#attributes) . |

## Css Variables

---

| Token | Value | Preview |
| --- | --- | --- |
| --ods-form-field-label-column-gap | calc(var(--ods-theme-column-gap) / 2) | 
 |
| --ods-form-field-label-row-gap | calc(var(--ods-theme-row-gap) / 2) | 

 |
| --ods-form-field-row-gap | calc(var(--ods-theme-row-gap) / 2) | 

 |

## Examples

---

### Default

```jsx
{
  globals: {
    imports: `import { FormField, Textarea } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <FormField>
      <Textarea name="textarea" />
    </FormField>
}
```

### Field label

```jsx
{
  globals: {
    imports: `import { FormField, FormFieldLabel, Textarea } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <FormField>
      <FormFieldLabel>
        Description:      </FormFieldLabel>
      <Textarea name="textarea" />
    </FormField>
}
```

### Field sub label

Description- mandatory

```jsx
{
  globals: {
    imports: `import { FormField, FormFieldLabel, FormFieldLabelSubLabel, Textarea } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <FormField>
      <FormFieldLabel>
        Description        <FormFieldLabelSubLabel>- mandatory</FormFieldLabelSubLabel>
      </FormFieldLabel>
      <Textarea name="textarea" />
    </FormField>
}
```

### Helper message

Helper text

```jsx
{
  globals: {
    imports: `import { TEXT_PRESET, FormField, FormFieldHelper, Text, Textarea } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <FormField>
      <Textarea name="textarea" />
      <FormFieldHelper>
        <Text preset={TEXT_PRESET.caption}>
          Helper text        </Text>
      </FormFieldHelper>
    </FormField>
}
```

### Error message

```jsx
{
  globals: {
    imports: `import { FormField, FormFieldError, Textarea } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <FormField invalid>
      <Textarea name="textarea" />
      <FormFieldError>
        Error message      </FormFieldError>
    </FormField>
}
```

## Recipes

---

Email Field

Email- mandatory

@

.fr.com.dev

The part before the email address (the text before the @) must follow these guidelines:

-   It must end with a letter or a number
-   Allowed special characters are: ".", "_", "-"
-   Special characters cannot be placed next to each other