Input

Description

The input component is an umbrella component for all inputs which share the same style as the classic text input field.

NB: Is InputMasked what you are looking for?

Consider using input field with a mask
Consider using input field with a mask

Demos

Placeholder text

<Input
label="Label:"
placeholder="Placeholder text"
/>

Search text placeholder

<Input
label="Search:"
type="search"
placeholder="Search text placeholder"
on_change={({ value }) => {
console.log('on_change', value)
}}
on_submit={({ value }) => {
console.log('Submit:', value)
}}
/>

Medium and stretched search input

<Input
size="medium"
type="search"
stretch={true}
value="Medium search value"
on_change={({ value }) => {
console.log('on_change', value)
}}
/>

Input with icon

With left / right aligned text

<Input
label="Input with icon:"
placeholder="Input"
label_direction="vertical"
icon="check"
bottom
/>
<Input
label="Input with icon:"
label_sr_only
placeholder="Input with a placeholder"
icon_position="right"
icon="check"
align="right"
/>

Disabled input

<Input
disabled
label="Disabled input:"
placeholder="Disabled Input with a placeholder"
/>

Show failure status

<Input
label="Show status:"
status="error"
value="Shows status with border only"
/>

With FormStatus

You have to fill in this field
<Input
label="With FormStatus:"
status="You have to fill in this field"
value="Input value with error"
/>

Input with suffix (additional description)

<Input
label={<Space element="span" className="dnb-h--large">Fødselsnummer</Space>}
label_direction="vertical"
autocomplete="on"
placeholder="Placeholder text"
suffix={<HelpButton title="Info" trigger_size="large">Some content</HelpButton>}
on_change={({ value }) => {
console.log('on_change', value)
}}
/>

Stretched Input in horizontal wrapping FormRow and a long label

Long label labwl Adipiscing mauris dis proin nec:
Status message
<FormRow
label="Long label labwl Adipiscing mauris dis proin nec:"
indent="true"
indent_offset="large"
wrap
>
<Input value="I stretch ..." stretch status="Status message" status_state="warn" />
</FormRow>

Numbers are using DNB Mono (monospace)

Also, this example manipulates the value during typing.

Numbers are using DNB Mono (monospace)
<Input
label="Label:"
autocomplete="on"
placeholder="Placeholder text"
status="Numbers are using DNB Mono (monospace)"
status_state="info"
value="1234567890"
on_change={({ value }) => {
console.log('on_change', value)
return String(value).toUpperCase()
}}
/>

Submit Form with Input

Pressing the enter key will trigger a submit.

<FormSet
prevent_submit={true}
on_submit={(event) => {
console.log('FormRow.on_submit', event)
}}
>
<FormRow>
<Input
type="search"
label="Label:"
value="Input ..."
selectall="true"
on_submit={event => {
console.log('Input.on_submit', event)
}}
on_change={({ value }) => {
console.log('on_change:', value)
}}
onChange={({ value }) => {
console.log('onChange:', value)
}}
right="small"
bottom="x-small"
/>
<Button text="Submit" type="submit" />
</FormRow>
</FormSet>

Input with clear button

Pushing the clear button or pressing the ESC key will clear the input.

<FormRow direction="vertical">
<Input
clear={true}
value="Value ..."
size="medium"
/>
<Input
clear={true}
value="Value ..."
type="search"
top
/>
<Input
clear={true}
value="Value ..."
icon="loupe"
type="search"
top
/>
</FormRow>

Input password type

The password component has to ensure that there is still room for password managers to inject the input with their UX functionality.

In order to get the show/hide button, you may have to import the component like so:

import InputPassword from '@dnb/eufemia/components/input/InputPassword'
<InputPassword
label="Label:"
placeholder="A placeholder text"
on_change={({ value }) => {
console.log('on_change:', value)
}}
on_show_password={() => {
console.log('on_show_password')
}}
on_hide_password={() => {
console.log('on_hide_password')
}}
/>