Inputs are used to allow users to provide text input when the expected input is short. As well as plain text, Input supports various types of text, including passwords and numbers.
<provet-stack><provet-inputstyle="--n-input-inline-size: 65px"label="Size"value="65px"></provet-input><provet-inputstyle="--n-input-inline-size: 150px"label="Size"value="150px"></provet-input><provet-inputlabel="Size"value="Default"></provet-input><provet-inputlabel="Size"value="Expand to fill the available width"expand></provet-input></provet-stack>
<provet-inputlabel="Label"expand><divslot="hint"> Hint is an accessible way to provide <strong>additional information</strong> that might help the user</div></provet-input>
<provet-stack><provet-inputlabel="With prefix"><divslot="start">$</div></provet-input><provet-inputlabel="With suffix"><divslot="end">cm</div></provet-input><provet-inputlabel="Dosage"><divslot="end">mL per hour</div></provet-input></provet-stack>
<provet-inputlabel="Label"error="This field is required"></provet-input>
Controls whether the input expands to fill the width of its container.
boolean
false
disallowPattern
disallow-pattern
Optionally disallow certain characters from being used inside the input, using a regex pattern.
string | undefined
undefined
size
size
The size of the component.
"s" | "m" | "l"
"m"
label
label
Label for the input.
string
""
hint
hint
Optional hint text to be displayed with the input. Alternatively use the hint slot.
string | undefined
undefined
hideLabel
hide-label
Visually hide the label, but still show it to assistive technologies like screen readers.
boolean
false
placeholder
placeholder
Placeholder text to display within the input.
string | undefined
undefined
error
error
Optional error to be shown with the input. Alternatively use the error slot.
string | undefined
undefined
required
required
Determines whether the input is required or not. An input marked as required will be announced as such to users of assistive technology. When using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.
boolean
false
hideRequired
hide-required
Visually hide the required indicator, but still show required attribute to assistive technologies like screen readers.
boolean
false
autocomplete
autocomplete
Specifies the data type of the field, so that the browser may attempt to fill out the field automatically on behalf of the user.
AutocompleteAttribute
"off"
readonly
readonly
Makes the component readonly, so that it is not editable. Readonly differs from disabled in that readonly fields are still focusable and will be submitted with a form.
boolean
false
selectionStart
–
Gets or sets the starting position or offset of a text selection.
Makes the component disabled. This prevents users from being able to interact with the component, and conveys its inactive state to assistive technologies.
boolean
false
name
name
The name of the form component.
string | undefined
undefined
value
value
The value of the form component.
string
""
form
form
Gets the form, if any, associated with the form element. The setter accepts a string, which is the id of the form.
HTMLFormElement | null
undefined
Events
Event
Description
Type
select
Fired when some text has been selected.
NordEvent
input
Fired as the user types into the input.
NordEvent
change
Fired whenever the input's value is changed via user interaction.
NordEvent
Slots
Slot name
Description
label
Use when a label requires more than plain text.
hint
Optional slot that holds hint text for the input.
error
Optional slot that holds error text for the input.
start
Optional slot used to place an icon or prefix at the start of the input.
end
Optional slot used to place an icon or suffix at the end of the input.
setSelectionRange(start: number | null, end: number | null, direction?: "forward" | "backward" | "none") => void
start: The offset into the text field for the start of the selection. end: The offset into the text field for the end of the selection. direction: The direction in which the selection is performed.
Sets the start and end positions of a selection in the text field.
replacement: The string to insert. start: The 0-based index of the first character to replace. Defaults to the current `selectionStart` value (the start of the user's current selection). end: The 0-based index of the character after the last character to replace. Defaults to the current `selectionEnd` value (the end of the user's current selection). selectMode: A string defining how the selection should be set after the text has been replaced.
Returns the native <input> or <textarea> element used under the hood.
focus(options?: FocusOptions) => void
options: An object which controls aspects of the focusing process.
Programmatically move focus to the component.
blur() => void
N/A
Programmatically remove focus from the component.
click() => void
N/A
Programmatically simulates a click on the component.
CSS Properties
CSS Custom Properties provide more fine grain control over component presentation. We advise utilizing existing properties on the component before using these.
Property
Description
Default
--n-input-inline-size
Controls the inline size, or width, of the input.
240px
--n-input-background
Controls the background of the input, using our color tokens.
var(--n-color-active)
--n-input-color
Controls the text color of the input, using our color tokens.
var(--n-color-text)
--n-input-border-color
Controls the border color of the input, using our color tokens.
Input labels act as a title for the text field. Labels should typically be short and in noun form:
Company name
What is your company name?
When writing input labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):
Company name
Company Name
When an input isn’t part of a form and is placed individually on a page, you could provide the input label as a call to action:
This section describes the different input types, their purpose, and when to use each type.
Name
Purpose
text
The default and most common variant. Displayed as a single-line text field. Line-breaks are automatically removed from the input value.
email
A field for editing an email address. Looks similar to a text input, but has validation parameters and relevant keyboard for devices with dynamic keyboards.
password
A single-line text field where the value is obscured. This type will alert user if a site is not secure.
tel
A field for entering a telephone number. Displays a number keypad on mobile devices.
url
A field variant that is used to let the user enter and edit an URL.
search
A single-line text field for entering search strings.
Each input size has a recommended icon size. The medium input uses the s icon size, the small input uses the xs icon size, and the large input uses the m icon size. The icon will adjust size automatically based on the button size, so you will get the correct behavior by default. However, this can be overridden by explicitly setting a size on the icon.
We recommend using Maskito for creating an input mask which ensures that users type values according to a predefined format.
Integration
For integration guidelines, please see Web Components documentation. This documentation explains how to implement and use Provet Cloud Web Components across different technologies such as Vue or Vanilla JavaScript.
Integration Guidelines
Troubleshooting
If you experience any issues while using Provet Cloud Web Components, please head over to the Support page for more guidelines and ways to contact us.