<commit_before>title: Field
---
Field component allows you to easily build your responsive Forms UI by wrapping each Form component (QInput, QSelect, QDatetime, QChipsInput and so on) to enrich it with a main label, an icon, error placeholder and error state, helper placeholder and/or item/character counter.
<input type="hidden" data-fullpage-demo="forms/field">

On small windows, label and content will stack vertically, while on bigger windows label will be placed on the left of QField content. Icons are always placed at the left of label and content, regardless of window width.

Works with ANY component, not only Form ones.

## Basic Usage

```html
<q-field
  icon="cloud"
  label="Your Gmail"
  helper="Helper"
  :error="mailHasError"
  error-label="We need a valid email"
  :count="10"
>
  <q-input suffix="@gmail.com" v-model="model" />
</q-field>
```

## Vue Properties

| Vue Property | Type | Description |
| --- | --- | --- |
| `label` | String | Main label to use. |
| `icon` | String | An icon to use on left of label. |
| `helper` | String | Helper text which gets placed below your wrapped form component. |
| `error` | Boolean | Highlight field and wrapped form component has an error. |
| `error-label` | String | If `error` is specified and `true`, then field helper is replaced by this prop. Doesn't depends on field helper existance. |
| `count` | Number/Boolean | Add a counter of characters or items (like Chips) in your wrapped form component. If Boolean, it just counts them. If Number, it also adds a maximum number to it, but doesn't acts as a restraint. |
| `inset` | String | Inset you field to align with other fields when current one is missing an icon and/or label. One of 'icon', 'label' or 'full' (inset for both icon and label). |
| `dark` | Boolean | Is your field used on a dark background? |
| `labelWidth` | Number | Out of 12 grid points, how much should the label take? Default is 5. Minimum is 1 and maximum is 11. |

## Examples
The following are just a glimpse of what QField can do for you.

### Using Counter
```html
<!--
  16 characters max.<commit_msg>typo (#289)<commit_after>title: Field
---
Field component allows you to easily build your responsive Forms UI by wrapping each Form component (QInput, QSelect, QDatetime, QChipsInput and so on) to enrich it with a main label, an icon, error placeholder and error state, helper placeholder and/or item/character counter.
<input type="hidden" data-fullpage-demo="forms/field">

On small windows, label and content will stack vertically, while on bigger windows label will be placed on the left of QField content. Icons are always placed at the left of label and content, regardless of window width.

Works with ANY component, not only Form ones.

## Basic Usage

```html
<q-field
  icon="cloud"
  label="Your Gmail"
  helper="Helper"
  :error="mailHasError"
  error-label="We need a valid email"
  :count="10"
>
  <q-input suffix="@gmail.com" v-model="model" />
</q-field>
```

## Vue Properties

| Vue Property | Type | Description |
| --- | --- | --- |
| `label` | String | Main label to use. |
| `icon` | String | An icon to use on left of label. |
| `helper` | String | Helper text which gets placed below your wrapped form component. |
| `error` | Boolean | Highlight field and wrapped form component has an error. |
| `error-label` | String | If `error` is specified and `true`, then field helper is replaced by this prop. Doesn't depend on field helper existance. |
| `count` | Number/Boolean | Add a counter of characters or items (like Chips) in your wrapped form component. If Boolean, it just counts them. If Number, it also adds a maximum number to it, but doesn't acts as a restraint. |
| `inset` | String | Inset you field to align with other fields when current one is missing an icon and/or label. One of 'icon', 'label' or 'full' (inset for both icon and label). |
| `dark` | Boolean | Is your field used on a dark background? |
| `labelWidth` | Number | Out of 12 grid points, how much should the label take? Default is 5. Minimum is 1 and maximum is 11. |

## Examples
The following are just a glimpse of what QField can do for you.

### Using Counter
```html
<!--
  16 characters max.
{'fraction_non_alphanumeric': 0.10149750415973377, 'fraction_numerical': 0.005467078678393154, 'mean_word_length': 3.8930232558139535, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 11, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5752558', 'n_tokens_mistral': 1215, 'n_tokens_neox': 1154, 'n_words': 602}