
Research
Security News
The Growing Risk of Malicious Browser Extensions
Socket researchers uncover how browser extensions in trusted stores are used to hijack sessions, redirect traffic, and manipulate user behavior.
@commercetools-uikit/label
Advanced tools
The Label component represents the primitive label for a form field component.
The Label component represents the primitive label for a field. It's made to be used with form fields. This component can also indicate if the field is required or not, and give emphasis by being bold.
In order to improve readability, using inverted
tone is recommended on dark backgrounds (E.g in a table header)
import Label from '@commercetools-uikit/label';
import { FormattedMessage } from 'react-intl';
const Example = () => (
<Label isRequiredIndicatorVisible={true} isBold={false} tone="inverted">
<FormattedMessage {...messages.title} />
</Label>
);
export default Example;
Props | Type | Required | Values | Default | Description |
---|---|---|---|---|---|
tone | union Possible values: 'primary' , 'inverted' | - | - | - | Indicates the tone to be applied to the label |
children | ReactNode | ✅ (*) | - | - | Value of the label |
intlMessage | MessageDescriptor | ✅ (*) | - | - | An intl message object that will be rendered with FormattedMessage |
isBold | boolean | - | - | false | Indicates if the label title should be in bold text. This prop is being deprecated in favor of the fontWeight prop |
fontWeight | union Possible values: 'medium' , 'bold' | - | - | regular | Indicates if the label title should be in medium , or bold weighted text, defaults to medium |
isRequiredIndicatorVisible | boolean | - | - | false | 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 . |
*
:children
is required only ifintlMessage
is not provided, and vice-versa
FAQs
The Label component represents the primitive label for a form field component.
The npm package @commercetools-uikit/label receives a total of 4,812 weekly downloads. As such, @commercetools-uikit/label popularity was classified as popular.
We found that @commercetools-uikit/label demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover how browser extensions in trusted stores are used to hijack sessions, redirect traffic, and manipulate user behavior.
Research
Security News
An in-depth analysis of credential stealers, crypto drainers, cryptojackers, and clipboard hijackers abusing open source package registries to compromise Web3 development environments.
Security News
pnpm 10.12.1 introduces a global virtual store for faster installs and new options for managing dependencies with version catalogs.