Default Gray Amethyst

Label

<mo-label> | MOLabel
Since 3.0 stable

Labels are used to describe form elements.

Label 
<mo-label>Label</mo-label>

import { MOLabel } from '@metsooutotec/modes-web-components/dist/react';

const App = () => <MOLabel>Label</MOLabel>;

Examples

Required

Add the required attribute to add a red asterisk to suggest that the input is required.

Required 
<mo-label required>Required</mo-label>

import { MOLabel } from '@metsooutotec/modes-web-components/dist/react';

const App = () => <MOLabel required>Required</MOLabel>;

Sizes

Use the size attribute to change the size of the label to match your input size.

Small Medium Large 
<div style="display: flex; flex-direction: column;">
  <mo-label required size="small">Small</mo-label>
  <mo-label required size="medium">Medium</mo-label>
  <mo-label required size="large">Large</mo-label>
</div>

import { MOLabel } from '@metsooutotec/modes-web-components/dist/react';

const App = () => (
  <>
    <MOLabel required size="small">
      Small
    </MOLabel>
    <MOLabel required size="medium">
      Medium
    </MOLabel>
    <MOLabel required size="large">
      Large
    </MOLabel>
  </>
);

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Bundler React Script

To import this component using a bundler:

import '@metsooutotec/modes-web-components/dist/components/label/label.js';

To import this component as a React component:

import MOLabel from '@metsooutotec/modes-web-components/dist/react/label/';

To import this component using a script tag:

<script type="module" src="https://modes-web.metso.com/dist/components/cdn/components/label/label.js"></script>

Slots

Name Description
(default) The default slot. Add your label here.

Learn more about using slots.

Properties

Name Description Reflects Type Default
size The size of the label. 'small' | 'medium' | 'large' 'medium'
required Draws the label in a required state. boolean false
for The id of the input element that the label is for. string ''
requiredText The text to display as required. string '*'
position The position of the label. 'top' | 'left' | 'right' 'top'
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Parts

Name Description
base The component’s internal wrapper.

Learn more about customizing CSS parts.