Input
<mo-input> | MOInput
Inputs collect data from the user.
<mo-input></mo-input>
import { MOInput } from '@metsooutotec/modes-web-components/dist/react'; const App = () => <MOInput />;
This component works with standard <form>
elements. Please refer to the section on
form controls to learn more about form submission and
client-side validation.
Examples
Labels
Use the label
attribute to give the input an accessible label. For labels that contain HTML,
use the label
slot instead.
<mo-input label="What is your name?"></mo-input> <div></div>
import { MOIcon, MOInput } from '@metsooutotec/modes-web-components/dist/react'; const App = () => <MOInput label="What is your name?" />;
Placeholders
Use the placeholder
attribute to add a placeholder.
<mo-input placeholder="Type something"></mo-input>
import { MOInput } from '@metsooutotec/modes-web-components/dist/react'; const App = () => <MOInput placeholder="Type something" />;
Help text
Add descriptive help text to an input with the help-text
attribute. For help texts that contain
HTML, use the help-text
slot instead.
<mo-input label="Nickname" help-text="What would you like people to call you?"></mo-input>
import { MOIcon, MOInput } from '@metsooutotec/modes-web-components/dist/react'; const App = () => <MOInput label="Nickname" help-text="What would you like people to call you?" />;
Error and success text
If you wish to use third party error validation, use the errorText
and
successText
attribute to show the error message. The error message will override the help text
for the duration that it is visible.
If you wish to show the state without having a message, use the success
and
error
boolean attributes instead.
<mo-input id="error" help-text="Please enter the postal code in format '12345'." label="Postal code" placeholder="01300" > </mo-input> <script> const input = document.getElementById('error'); input.addEventListener('mo-blur', () => { if (input.value.length === 5 && !isNaN(input.value)) { input.successText = 'The format is correct.'; input.errorText = ''; } else { input.errorText = "The postal code must be in format '12345'"; input.successText = ''; } }); </script>
import { MOIcon, MOInput } from '@metsooutotec/modes-web-components/dist/react'; const App = () => ( <MOInput helpText="Please enter the postal code in format '12345'." label="Postal code" placeholder="01300" /> );
If you would rather handle error states using the browsers built-in validation, refer to the validation section in the form controls guide.
Clearable
Add the clearable
attribute to add a clear button when the input has content.
<mo-input placeholder="Clearable" clearable></mo-input>
import { MOInput } from '@metsooutotec/modes-web-components/dist/react'; const App = () => <MOInput placeholder="Clearable" clearable />;
Toggle password
Add the password-toggle
attribute to add a toggle button that will show the password when
activated.
<mo-input type="password" placeholder="Password Toggle" size="small" password-toggle></mo-input> <br /> <mo-input type="password" placeholder="Password Toggle" size="medium" password-toggle></mo-input> <br /> <mo-input type="password" placeholder="Password Toggle" size="large" password-toggle></mo-input>
import { MOInput } from '@metsooutotec/modes-web-components/dist/react'; const App = () => ( <> <MOInput type="password" placeholder="Password Toggle" size="small" toggle-password /> <br /> <MOInput type="password" placeholder="Password Toggle" size="medium" toggle-password /> <br /> <MOInput type="password" placeholder="Password Toggle" size="large" toggle-password /> </> );
Filled inputs
Add the filled
attribute to draw a filled input.
<mo-input placeholder="Type something" filled></mo-input>
import { MOInput } from '@metsooutotec/modes-web-components/dist/react'; const App = () => <MOInput placeholder="Type something" filled />;
Input types
The type
attribute controls the type of input the browser renders.
<mo-input type="email" Placeholder="Email"></mo-input> <br /> <mo-input type="number" Placeholder="Number"></mo-input> <br /> <mo-input type="date" Placeholder="Date"></mo-input>
import { MOInput } from '@metsooutotec/modes-web-components/dist/react'; const App = () => ( <> <MOInput type="email" Placeholder="Email" /> <br /> <MOInput type="number" Placeholder="Number" /> <br /> <MOInput type="date" Placeholder="Date" /> </> );
In most cases you should use the mo-date-picker
instead
of the input type="date"
.
Disabled
Use the disabled
attribute to disable an input.
<mo-input placeholder="Disabled" size="small" disabled></mo-input> <br /> <mo-input placeholder="Disabled" size="medium" disabled></mo-input> <br /> <mo-input placeholder="Disabled" size="large" disabled></mo-input>
import { MOInput } from '@metsooutotec/modes-web-components/dist/react'; const App = () => ( <> <MOInput placeholder="Disabled" size="small" disabled /> <br /> <MOInput placeholder="Disabled" size="medium" disabled /> <br /> <MOInput placeholder="Disabled" size="large" disabled /> </> );
Required
Use the required
attribute to make an input field required.
<mo-input label="First name" placeholder="John" size="small" required></mo-input> <br /> <mo-input label="Last name" placeholder="Doe" size="medium" required></mo-input> <br /> <mo-input label="Phone number" placeholder="123-456-7890" size="large" required></mo-input>
import { MOInput } from '@metsooutotec/modes-web-components/dist/react'; const App = () => ( <> <MOInput label="First name" placeholder="John" size="small" required /> <br /> <MOInput label="Last name" placeholder="Doe" size="medium" required /> <br /> <MOInput label="Phone number" placeholder="123-456-7890" size="large" required /> </> );
Sizes
Use the size
attribute to change an input’s size.
<mo-input help-text="Additional instructions" label="Small" placeholder="Placeholder" size="small"></mo-input> <br /> <mo-input help-text="Additional instructions" label="Medium" placeholder="Placeholder" size="medium"></mo-input> <br /> <mo-input help-text="Additional instructions" label="Large" placeholder="Placeholder" size="large"></mo-input>
import { MOInput } from '@metsooutotec/modes-web-components/dist/react'; const App = () => ( <> <MOInput help-text="Additional instructions" label="Small" placeholder="Small" size="small" /> <br /> <MOInput help-text="Additional instructions" label="Medium" placeholder="Medium" size="medium" /> <br /> <MOInput help-text="Additional instructions" label="Large" placeholder="Large" size="large" /> </> );
Prefix & suffix icons
Use the prefix
and suffix
slots to add icons.
<mo-input placeholder="Small" size="small"> <mo-icon name="home" slot="prefix"></mo-icon> <mo-icon name="chatting" slot="suffix"></mo-icon> </mo-input> <br /> <mo-input placeholder="Medium" size="medium"> <mo-icon name="home" slot="prefix"></mo-icon> <mo-icon name="chatting" slot="suffix"></mo-icon> </mo-input> <br /> <mo-input placeholder="Large" size="large"> <mo-icon name="home" slot="prefix"></mo-icon> <mo-icon name="chatting" slot="suffix"></mo-icon> </mo-input>
import { MOIcon, MOInput } from '@metsooutotec/modes-web-components/dist/react'; const App = () => ( <> <MOInput placeholder="Small" size="small"> <MOIcon name="home" slot="prefix"></MOIcon> <MOIcon name="chatting" slot="suffix"></MOIcon> </MOInput> <br /> <MOInput placeholder="Medium" size="medium"> <MOIcon name="home" slot="prefix"></MOIcon> <MOIcon name="chatting" slot="suffix"></MOIcon> </MOInput> <br /> <MOInput placeholder="Large" size="large"> <MOIcon name="home" slot="prefix"></MOIcon> <MOIcon name="chatting" slot="suffix"></MOIcon> </MOInput> </> );
Suffix slot as label
The suffix
slot can be used to have the label inside the input where saving space is important.
Position and dimensions
X
Y
W
H
<p style="margin-top: 0;">Position and dimensions</p> <div style="display: flex; gap: 8px;"> <div style="display: flex; gap: 8px; flex-direction: column;"> <mo-input style="width: 100px" placeholder="X position" size="small"> <p slot="suffix">X</p> </mo-input> <mo-input style="width: 100px" placeholder="Y position" size="small"> <p slot="suffix">Y</p> </mo-input> </div> <div style="display: flex; gap: 8px; flex-direction: column;"> <mo-input style="width: 100px" placeholder="Width" size="small"> <p slot="suffix">W</p> </mo-input> <mo-input style="width: 100px" placeholder="Height" size="small"> <p slot="suffix">H</p> </mo-input> </div> </div>
import { MOIcon, MOInput } from '@metsooutotec/modes-web-components/dist/react'; const App = () => { <p style="margin-top: 0;">Position and dimensions</p> <div style="display: flex; gap: 8px;"> <div style="display: flex; gap: 8px; flex-direction: column;"> <MOInput style="width: 100px" placeholder="X position" size="small"> <p slot="suffix">X</p> </MOInput> <MOInput style="width: 100px" placeholder="Y position" size="small"> <p slot="suffix">Y</p> </MOInput> </div> <div style="display: flex; gap: 8px; flex-direction: column;"> <MOInput style="width: 100px" placeholder="Width" size="small"> <p slot="suffix">W</p> </MOInput> <MOInput style="width: 100px" placeholder="Height" size="small"> <p slot="suffix">H</p> </MOInput> </div> </div>; };
Custom validation
Inputs inside a form can be validated for errors on form submission. Check form controls to learn more about form submission and client-side validation.
<form class="input-validation-pattern"> <mo-input name="letters" required label="Letters only" pattern="[A-Za-z]+"></mo-input> <br /> <mo-button type="submit" variant="primary">Submit</mo-button> </form> <script type="module"> const form = document.querySelector('.input-validation-pattern'); // Wait for controls to be defined before attaching form listeners await Promise.all([ customElements.whenDefined('mo-button'), customElements.whenDefined('mo-input'), ]).then(() => { form.addEventListener('submit', event => { event.preventDefault(); alert('All fields are valid!'); }); }); </script>
import { MOButton, MOInput } from '@metsooutotec/modes-web-components/dist/react'; const App = () => { function handleSubmit(event) { event.preventDefault(); alert('All fields are valid!'); } return ( <form onSubmit={handleSubmit}> <MOInput name="letters" required label="Letters only" pattern="[A-Za-z]+" /> <br /> <MOButton type="submit" variant="primary"> Submit </MOButton> </form> ); };
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.
To import this component using a bundler:
import '@metsooutotec/modes-web-components/dist/components/input/input.js';
To import this component as a React component:
import MOInput from '@metsooutotec/modes-web-components/dist/react/input/';
To import this component using a script tag:
<script type="module" src="https://modes-web.metso.com/dist/components/cdn/components/input/input.js"></script>
Slots
Name | Description |
---|---|
label
|
The input’s label. Alternatively, you can use the label attribute. |
prefix
|
Used to prepend a presentational icon or similar element to the input. |
suffix
|
Used to append a presentational icon or similar element to the input. |
clear-icon
|
An icon to use in lieu of the default clear icon. |
show-password-icon
|
An icon to use in lieu of the default show password icon. |
hide-password-icon
|
An icon to use in lieu of the default hide password icon. |
help-text
|
Text that describes how to use the input. Alternatively, you can use the
help-text attribute.
|
Learn more about using slots.
Properties
Name | Description | Reflects | Type | Default |
---|---|---|---|---|
type
|
The type of input. Works the same as a native <input> element, but only a subset
of types are supported. Defaults to text .
|
|
'date' | 'datetime-local' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' |
'url'
|
'text'
|
name
|
The name of the input, submitted as a name/value pair with form data. |
string
|
''
|
|
value
|
The current value of the input, submitted as a name/value pair with form data. |
string
|
''
|
|
defaultValue
|
The default value of the form control. Primarily used for resetting the form control. |
string
|
''
|
|
size
|
The input’s size. |
|
'small' | 'medium' | 'large'
|
'medium'
|
filled
|
Draws a filled input. |
|
boolean
|
false
|
pill
|
Draws a pill-style input with rounded edges. |
|
boolean
|
false
|
label
|
The input’s label. If you need to display HTML, use the label slot instead. |
string
|
''
|
|
helpText
help-text
|
The input’s help text. If you need to display HTML, use the help-text slot instead.
|
string
|
''
|
|
clearable
|
Adds a clear button when the input is not empty. |
boolean
|
false
|
|
disabled
|
Disables the input. |
|
boolean
|
false
|
error
|
Renders the field in an error state |
|
boolean
|
false
|
success
|
Renders the field in a success state |
|
boolean
|
false
|
placeholder
|
Placeholder text to show as a hint when the input is empty. |
string
|
''
|
|
errorText
error-text
|
Error text to show in place of help text when input is invalid. |
string
|
''
|
|
successText
success-text
|
Success text to show in place of help text when input is valid. |
string
|
''
|
|
readonly
|
Makes the input readonly. |
|
boolean
|
false
|
passwordToggle
password-toggle
|
Adds a button to toggle the password’s visibility. Only applies to password types. |
boolean
|
false
|
|
passwordVisible
password-visible
|
Determines whether or not the password is currently visible. Only applies to password input types. |
boolean
|
false
|
|
noSpinButtons
no-spin-buttons
|
Hides the browser’s built-in increment/decrement spin buttons for number inputs. |
boolean
|
false
|
|
form
|
By default, form controls are associated with the nearest containing
<form> element. This attribute allows you to place the form control outside of a
form and associate it with the form that has this id . The form must be in the same
document or shadow root for this to work.
|
|
string
|
''
|
required
|
Makes the input a required field. |
|
boolean
|
false
|
pattern
|
A regular expression pattern to validate input against. |
string
|
- | |
minlength
|
The minimum length of input that will be considered valid. |
number
|
- | |
maxlength
|
The maximum length of input that will be considered valid. |
number
|
- | |
min
|
The input’s minimum value. Only applies to date and number input types. |
number | string
|
- | |
max
|
The input’s maximum value. Only applies to date and number input types. |
number | string
|
- | |
step
|
Specifies the granularity that the value must adhere to, or the special value any which
means no stepping is implied, allowing any numeric value. Only applies to date and number input
types.
|
number | 'any'
|
- | |
autocapitalize
|
Controls whether and how text input is automatically capitalized as it is entered by the user. |
'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'
|
- | |
autocorrect
|
Indicates whether the browser’s autocorrect feature is on or off. |
'off' | 'on'
|
- | |
autocomplete
|
Specifies what permission the browser has to provide assistance in filling out form field values. Refer to this page on MDN for available values. |
string
|
- | |
autofocus
|
Indicates that the input should receive focus on page load. |
boolean
|
- | |
enterkeyhint
|
Used to customize the label or icon of the Enter key on virtual keyboards. |
'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'
|
- | |
spellcheck
|
Enables spell checking on the input. |
boolean
|
true
|
|
inputmode
|
Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual keyboard on supportive devices. |
'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'
|
- | |
valueAsDate
|
Gets or sets the current value as a Date object. Returns null if the value
can’t be converted. This will use the native
<input type="{{type}}"> implementation and may result in an error.
|
- | - | |
valueAsNumber
|
Gets or sets the current value as a number. Returns NaN if the value can’t be
converted.
|
- | - | |
validity
|
Gets the validity state object | - | - | |
validationMessage
|
Gets the validation message | - | - | |
updateComplete |
A read-only promise that resolves when the component has finished updating. |
Learn more about attributes and properties.
Events
Name | React Event | Description | Event Detail |
---|---|---|---|
mo-blur |
onMoBlur |
Emitted when the control loses focus. | - |
mo-change |
onMoChange |
Emitted when an alteration to the control’s value is committed by the user. | - |
mo-clear |
onMoClear |
Emitted when the clear button is activated. | - |
mo-focus |
onMoFocus |
Emitted when the control gains focus. | - |
mo-input |
onMoInput |
Emitted when the control receives input. | - |
mo-invalid |
onMoInvalid |
Emitted when the form control has been checked for validity and its constraints aren’t satisfied. | - |
Learn more about events.
Methods
Name | Description | Arguments |
---|---|---|
focus() |
Sets focus on the input. |
options: FocusOptions
|
blur() |
Removes focus from the input. | - |
select() |
Selects all the text in the input. | - |
setSelectionRange() |
Sets the start and end positions of the text selection (0-based). |
selectionStart: number, selectionEnd: number, selectionDirection: 'forward' | 'backward' | 'none'
|
setRangeText() |
Replaces a range of text with a new string. |
replacement: string, start: number, end: number, selectMode: 'select' | 'start' | 'end' |
'preserve'
|
showPicker() |
Displays the browser picker for an input element (only works if the browser supports it for the input type). | - |
stepUp() |
Increments the value of a numeric input type by the value of the step attribute. | - |
stepDown() |
Decrements the value of a numeric input type by the value of the step attribute. | - |
checkValidity() |
Checks for validity but does not show a validation message. Returns true when valid and
false when invalid.
|
- |
getForm() |
Gets the associated form, if one exists. | - |
reportValidity() |
Checks for validity and shows the browser’s validation message if the control is invalid. | - |
setCustomValidity() |
Sets a custom validation message. Pass an empty string to restore validity. |
message: string
|
Learn more about methods.
Parts
Name | Description |
---|---|
form-control |
The form control that wraps the label, input, and help text. |
form-control-label |
The label’s wrapper. |
form-control-input |
The input’s wrapper. |
form-control-help-text |
The help text’s wrapper. |
base |
The component’s base wrapper. |
input |
The internal <input> control. |
prefix |
The container that wraps the prefix. |
clear-button |
The clear button. |
password-toggle-button |
The password toggle button. |
suffix |
The container that wraps the suffix. |
label__base |
The input label. |
Learn more about customizing CSS parts.
Dependencies
This component automatically imports the following dependencies.