# @commercetools-uikit/field-label > The FieldLabel component represents the label for a field in a form. Latest version **20.6.7** (published 2026-07-17) · MIT license · 0 weekly downloads ## Install ```sh npm install @commercetools-uikit/field-label pnpm add @commercetools-uikit/field-label yarn add @commercetools-uikit/field-label bun add @commercetools-uikit/field-label ``` ## Health **Score 70/100 (B)** — status: active. Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score. Warnings: low downloads. ## Facts | | | |---|---| | Version | 20.6.7 | | Published | 2026-07-17 | | First published | 2019-11-29 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 15 | | Unpacked size | 59.4 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Provenance | attested (GitHub Actions) | | GitHub stars | 154 | | Maintainers | emmenko, commercetools-admin, tdeekens | | Keywords | javascript, typescript, design-system, react, uikit | ## Links - npm: https://www.npmjs.com/package/@commercetools-uikit/field-label - Repository: https://github.com/commercetools/ui-kit - Homepage: https://uikit.commercetools.com - Issues: https://github.com/commercetools/ui-kit/issues - npm.io page: https://npm.io/package/@commercetools-uikit/field-label ## Dependencies (15) - [react-intl](https://npm.io/package/react-intl.md) ^7.1.4 - [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.20.13 - [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.10.5 - [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^11.10.5 - [@babel/runtime-corejs3](https://npm.io/package/@babel/runtime-corejs3.md) ^7.20.13 - [@commercetools-uikit/text](https://npm.io/package/@commercetools-uikit/text.md) ^20.6.7 - [@commercetools-uikit/icons](https://npm.io/package/@commercetools-uikit/icons.md) ^20.6.7 - [@commercetools-uikit/label](https://npm.io/package/@commercetools-uikit/label.md) ^20.6.7 - [@commercetools-uikit/utils](https://npm.io/package/@commercetools-uikit/utils.md) ^20.6.7 - [@commercetools-uikit/constraints](https://npm.io/package/@commercetools-uikit/constraints.md) ^20.6.7 - [@commercetools-uikit/icon-button](https://npm.io/package/@commercetools-uikit/icon-button.md) ^20.6.7 - [@commercetools-uikit/design-system](https://npm.io/package/@commercetools-uikit/design-system.md) ^20.6.7 - [@commercetools-uikit/spacings-stack](https://npm.io/package/@commercetools-uikit/spacings-stack.md) ^20.6.7 - [@commercetools-uikit/spacings-inline](https://npm.io/package/@commercetools-uikit/spacings-inline.md) ^20.6.7 - [@commercetools-uikit/secondary-icon-button](https://npm.io/package/@commercetools-uikit/secondary-icon-button.md) ^20.6.7 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 20.6.7 (latest) — 2026-07-17 - 0.0.0-canary-20260831181816 (canary) — 2026-08-31 - 0.0.0-FEC-938-ui-kit-post-pnpm-tooling-polish-catalogs-bundlewatch-bundlesize-20260518121756 (FEC-938-ui-kit-post-pnpm-tooling-polish-catalogs-bundlewatch-bundlesize) — 2026-05-18 - 0.0.0-migration-pnpm-20260513114959 (migration-pnpm) — 2026-05-13 - 0.0.0-CRAFT-2040-rich-text-input-destroys-hyperlink-tag-20260219190637 (CRAFT-2040-rich-text-input-destroys-hyperlink-tag) — 2026-02-19 - 0.0.0-fec-155-react-19-20250528075244 (fec-155-react-19) — 2025-05-28 - 0.0.0-FCT-1500-adjust-legacy-css-reset-20250527090339 (FCT-1500-adjust-legacy-css-reset) — 2025-05-27 - 0.0.0-SUPPORT-32352-de-ch-money-input-20250509174254 (SUPPORT-32352-de-ch-money-input) — 2025-05-09 - 0.0.0-main-20250115172531 (main) — 2025-01-15 - 0.0.0-preview-fec-155-react-19-20250113184401 (preview-fec-155-react-19) — 2025-01-13 - 0.0.0-preview-test-icon-entrypoints-20241212201418 (preview-test-icon-entrypoints) — 2024-12-12 - 0.0.0-preview-test-icon-pure-annotations-20241211181046 (preview-test-icon-pure-annotations) — 2024-12-11 - 0.0.0-preview-test-icon-bundle-20241210182318 (preview-test-icon-bundle) — 2024-12-10 - 0.0.0-preview-test-canary-preview-20241204111237 (preview-test-canary-preview) — 2024-12-04 - 0.0.0-preview-FCT-1187-20241024123200 (preview) — 2024-10-24 - … 1130 more at https://npm.io/package/@commercetools-uikit/field-label/versions ## README # FieldLabel ## Description The FieldLabel component represents the label for a field in a form. This component can also be used to better explain an input field and to guide the user to fill a form. ## Installation ``` pnpm add @commercetools-uikit/field-label ``` ``` npm --save install @commercetools-uikit/field-label ``` Additionally install the peer dependencies (if not present) ``` pnpm add react ``` ``` npm --save install react ``` ## Usage ```jsx import { defineMessage, FormattedMessage } from 'react-intl'; import FlatButton from '@commercetools-uikit/flat-button'; import FieldLabel from '@commercetools-uikit/field-label'; import { WarningIcon } from '@commercetools-uikit/icons'; const messages = defineMessage(); const Example = () => ( } hasRequiredIndicator={true} onInfoButtonClick={() => {}} hint={} hintIcon={} description={} badge={} htmlFor="sampleInput" horizontalConstraint={7} /> ); export default Example; ``` ## Properties | Props | Type | Required | Default | Description | | ---------------------- | ----------------------------------------------------------------------------------------------------- | :------: | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `title` | `union`
Possible values:
`string , ReactNode` | ✅ | | Title of the label | | `hint` | `union`
Possible values:
`string , ReactNode` | | | Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once), whereas description can describe it in more depth. Can also receive a hintIcon. | | `description` | `union`
Possible values:
`string , ReactNode` | | | Provides a description for the title. | | `onInfoButtonClick` | `Function`
[See signature.](#signature-oninfobuttonclick) | | | Function called when info button is pressed. Info button will only be visible when this prop is passed. | | `tone` | `union`
Possible values:
`'primary' , 'inverted'` | | | Indicates the tone to be applied to the label | | `hintIcon` | `ReactElement` | | | Icon to be displayed beside the hint text. Will only get rendered when hint is passed as well. | | `badge` | `ReactNode` | | | Badge to be displayed beside the label. Might be used to display additional information about the content of the field (E.g verified email) | | `hasRequiredIndicator` | `boolean` | | | Indicates if the labeled field is required in a form | | `htmlFor` | `string` | | | The for HTML attribute, used to reference form elements with the related attribute id or aria-labelledby. | | `id` | `string` | | | The id HTML attribute, used to reference non-form elements with the related attribute aria-labelledby. | | `horizontalConstraint` | `union`
Possible values:
`, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | `'scale'` | Horizontal size limit of the label. | ## Signatures ### Signature `onInfoButtonClick` ```ts ( event: MouseEvent | KeyboardEvent ) => void ``` ## `hintIcon` The `hintIcon` also accepts a custom `color` while defaulting to `warning` in the case above. The `hintIcon` does **not** support the `size` prop, and will always be rendered in the size `medium`. ```diff } hasRequiredIndicator={true} onInfoButtonClick={() => {}} />} hint={} - hintIcon={} + hintIcon={} description={} badge={} htmlFor="sampleInput" horizontalConstraint={7} /> ``` ## `hint` vs `description` Most fields will only use the `description` which provides more information about what the entered value will be used for. The `hint` however is used to show additional information about the value the user enters. It can show the allowed characters. It can also show whether the entered value has errors (like a reference no longer existing in an attribute) when the form is loaded for the first time. Neither of them should be used for form validation. ## Dos and don'ts Recommended to be used in vertical forms. (E.g input field below the label, and not besides). --- _Source: https://npm.io/package/@commercetools-uikit/field-label · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._