# nord-input > 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. ## Usage This section includes guidelines for designers and developers about the usage of this component in different contexts. > **Do:** - Use to provide a text input where the expected input is short. - Use to only ask for information that’s really needed. Hide optional fields by default if possible or have them shown with a lower priority. - Use help text and placeholder to provide additional, non-critical instructions. - Validate input as soon as users have finished interacting with them (but not before). - Where necessary, label the input as “Optional” when you need to request input that’s not required. > **Don't:** - Don’t use when the expected text input is long. Use textarea component instead. - Don’t use the placeholder to provide information that’s required to use the input. Hint text should be used for this purpose instead. --- ## Hint placement Hint text is rendered above the control by default to preserve existing behavior for current consumers. Use the `hint-below` property to opt in to rendering the hint below the control and any error. This is a non-breaking rollout for teams adopting the new layout gradually. Existing integrations keep the current placement unless `hint-below` is explicitly set. --- ## Content guidelines Input labels act as a title for the text field. Labels should typically be short and in noun form: > **Do:** Company name > **Don't:** 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): > **Do:** Company name > **Don't:** 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: > **Do:** Leave a comment > **Don't:** Comment Do not use colons in input label: > **Do:** First name > **Don't:** First name: --- ## Types 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. | | `number` | Used to let the user enter a number. | --- ## Icon usage in input Each [input size](/components/input/?example=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. --- ## Input mode The `inputmode` attribute provides a hint to the browser about what type of keyboard to show on mobile devices. This is particularly useful for optimizing the mobile experience by opening the appropriate keyboard (numeric, email, URL, etc.) based on the expected input. - The `inputmode` attribute accepts the following values: `none`, `text`, `decimal`, `numeric`, `tel`, `search`, `email`, and `url`. - The component automatically defaults `inputmode` based on the input `type`: - `type="number"` → `inputmode="numeric"` - `type="email"` → `inputmode="email"` - `type="tel"` → `inputmode="tel"` - `type="url"` → `inputmode="url"` - `type="search"` → `inputmode="search"` - You can override these defaults by explicitly setting a custom `inputmode` value, for example `inputmode="decimal"` on a number type input, or `inputmode="numeric"` on a text type input. --- ## Input masking We recommend using [Maskito](https://maskito.dev/){rel="[\"nofollow\"]"} for creating an [input mask](/components/input/?example=input+mask) which ensures that users type values according to a predefined format. ## Examples ### Autocomplete ```html Email ``` ### Basic ```html Label ``` ### Custom Button ```html Show / hide password Show / hide API key Feline Bird Fish Canine Amphibia Select an icon for your pet Cattle Suidae Sheep Select an icon for your livestock ``` ### Custom Icon ```html ``` ### Custom Width ```html ``` ### Disabled ```html Label Amount
£
 ``` ### Disallow Pattern ```html ``` ### Expanded ```html ``` ### Hidden Label ```html Search ``` ### Input Mask ```html el && applyTimeMask(el as HTMLElement))}> ``` ### Inputmode ```html

Default inputmode based on type

Custom inputmode overrides

 ``` ### Readonly ```html Readonly ``` ### Required ```html ``` ### Search ```html Search ``` ### Size ```html ``` ### Small With Custom Label Color ```html Email ``` ### Stepper ```html Amount Decrease amount Increase amount ``` ### Text Selection ```html Select all Select range Replace selection Remove selection ``` ### Units ```html
cm
km
$
 ``` ### With A Complex Hint ```html Label Hint is an accessible way to provide additional information that might help the user ``` ### With A Complex Label ```html Label with color ``` ### With A Hint ```html ``` ### With A Hint Below ```html Label Hint is an accessible way to provide additional information that might help the user This field is required ``` ### With A Placeholder ```html ``` ### With A Prefix Or Suffix ```html
$
cm
mL per hour
 ``` ### With Error ```html Label This field is required ``` ### Form ```html
Cancel Submit
``` ### Date ```html ``` ### Time ```html ``` ### Date Time ```html Starts at ``` ### File ```html ``` ### Inline ```html
Search Search
``` ### Grid ```html ``` ### Badge ```html Webhook URL Beta ``` ### Standalone ```html ``` ### Field ```html Email We'll never share it. ``` ## API Reference ### Properties - **type** (`| 'text' | 'email' | 'password' | 'tel' | 'url' | 'search' | 'number' | 'date' | 'time' | 'datetime-local' | 'file' | 'unit' | 'button'`, default: `'text'`) — The type of the input. - **expand** (`boolean`, default: `false`) — Controls whether the input expands to fill the width of its container. - **disallow-pattern** (`string | undefined`, default: `undefined`) — Optionally disallow certain characters from being used inside the input, using a regex pattern. - **inputmode** (`'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url' | undefined`, default: `undefined`) — The inputmode attribute provides a hint to the browser about what type of keyboard to open on mobile devices. Valid values: none, text, decimal, numeric, tel, search, email, url When not explicitly set, defaults based on input type: - type="number" → inputmode="numeric" - type="email" → inputmode="email" - type="tel" → inputmode="tel" - type="url" → inputmode="url" - type="search" → inputmode="search" Can be explicitly overridden for any type. - **size** (`'s' | 'm' | 'l'`, default: `'m'`) — The size of the component. - **placeholder** (`string | undefined`) — Placeholder text to display within the control. - **label** (`string`, default: `''`) — Label for the control. Ignored when the control is wrapped in a <nord-field>, which provides the label via <nord-field-label>. - **hint** (`string | undefined`) — Optional hint text shown with the control. Ignored inside a <nord-field>, which provides it via <nord-field-description>. - **hint-below** (`boolean`, default: `false`) — Renders the hint below the control and any error instead of below the label. - **hide-label** (`boolean`, default: `false`) — Visually hide the label, but still expose it to assistive technologies. - **error** (`string | undefined`) — Optional error shown with the control. Ignored inside a <nord-field>, which provides it via <nord-field-error>. - **required** (`boolean`, default: `false`) — Determines whether the control is required or not. A required control is announced as such to assistive technology and, inside a <nord-field>, drives the required indicator on the <nord-field-label>. When using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors. - **hide-required** (`boolean`, default: `false`) — Visually hide the required indicator, but still expose the required state to assistive technologies. - **autocomplete** (`AutocompleteAttribute`, default: `'off'`) — Specifies the data type of the field, so that the browser may attempt to fill out the field automatically on behalf of the user. - **readonly** (`boolean`, default: `false`) — 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. - **disabled** (`boolean`, default: `false`) — Makes the component disabled. This prevents users from being able to interact with the component, and conveys its inactive state to assistive technologies. - **name** (`string | undefined`) — The name of the form component. - **value** (`string`, default: `''`) — The value of the form component. - **form** (`HTMLFormElement | null`) — Gets the form, if any, associated with the form element. The setter accepts a string, which is the id of the form. ### Events - **select** (`NordEvent`) — Fired when some text has been selected. - **input** (`NordEvent`) — Fired as the user types into the input. - **change** (`NordEvent`) — Fired whenever the input's value is changed via user interaction. ### Slots - **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. ### Methods - **focus** — `focus(options?: FocusOptions) => void` — Programmatically move focus to the component. - **blur** — `blur() => void` — Programmatically remove focus from the component. - **click** — `click() => void` — Programmatically simulates a click on the component. ### CSS Custom Properties - `--n-input-inline-size` (default: `240px`) — Controls the inline size, or width, of the input. - `--n-input-block-size` (default: `var(--n-space-xl)`) — Controls the block size, or height, of the input using our spacing tokens. - `--n-input-background` (default: `var(--n-color-surface)`) — Controls the background of the input, using our color tokens. - `--n-input-color` (default: `var(--n-color-text)`) — Controls the text color of the input, using our color tokens. - `--n-input-border-color` (default: `var(--n-color-border-strong)`) — Controls the border color of the input, using our color tokens. - `--n-input-border-radius` (default: `var(--n-border-radius-s)`) — Controls how rounded the corners are, using border radius tokens. - `--n-input-text-align` (default: `start`) — Controls the alignment of text within the input itself. - `--n-label-color` (default: `var(--n-color-text)`) — Controls the text color of the label, using our color tokens. ### Dependencies - `icon`