Skip to content
Home

Input

Info
Demos
Properties
Events

Demos

Placeholder text

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

Search text placeholder

Search inputs show a loupe icon by default. Add showSubmitButton only when an integrated submit button is needed. If you previously relied on type="search" to render a submit button, add showSubmitButton.

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

Medium and stretched search input

This example uses showSubmitButton to show the integrated submit button.

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

Input with icon

With left / right aligned text

<Input label="Input with icon" placeholder="Input" icon="check" bottom />
<Input
  label="Input with icon"
  labelSrOnly
  placeholder="Input with a placeholder"
  iconPosition="right"
  icon="check"
  align="right"
/>

Disabled input

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

With FormStatus

You have to fill in this field
You have to fill in this field
<Flex.Vertical>
  <section>
    <Input
      label="With FormStatus"
      status="You have to fill in this field"
      value="Input value with error"
    />
  </section>
  <section>
    <Input
      label="With button"
      status="You have to fill in this field"
      value="Input value with error"
      type="search"
      showSubmitButton
    />
  </section>
</Flex.Vertical>

Input with suffix and custom label component

<Input
  label={<Lead>Fødselsnummer</Lead>}
  autocomplete="on"
  placeholder="Placeholder text"
  suffix={
    <HelpButton title="Info" size="large">
      Some content
    </HelpButton>
  }
  onChange={({ value }) => {
    console.log('onChange', value)
  }}
/>

Stretched Input in horizontal flex and a long label

Status message
<FieldBlock
  label="Long label labwl Adipiscing mauris dis proin nec"
  forId="input-id"
>
  <Input
    id="input-id"
    value="I stretch ..."
    stretch
    status="Status message"
    statusState="warning"
  />
</FieldBlock>

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)"
  statusState="information"
  value="1234567890"
  onChange={({ value }) => {
    console.log('onChange', value)
    return String(value).toUpperCase()
  }}
/>

Submit Form with Input

Pressing the enter key will trigger a submit.

<Form.Handler
  onSubmit={(event) => {
    console.log(event)
  }}
>
  <FormLabel forId="search">Label</FormLabel>
  <Flex.Horizontal align="baseline">
    <Input
      id="search"
      type="search"
      value="Input ..."
      selectAll={true}
      onSubmit={(event) => {
        console.log('Input.onSubmit', event)
      }}
      onChange={({ value }) => {
        console.log('onChange:', value)
      }}
    />
    <Form.SubmitButton />
  </Flex.Horizontal>
</Form.Handler>

Input with clear button

Pushing the clear button will clear the input. The last example combines the clear button with an explicit search submit button.

<Flex.Vertical>
  <Input showClearButton={true} value="Value ..." size="medium" />
  <Input showClearButton={true} value="Value ..." type="search" />
  <Input
    showClearButton={true}
    value="Value ..."
    type="search"
    showSubmitButton
  />
</Flex.Vertical>

Prevent typing of invalid characters

You can check out the Field.String example for more information using onInput event handler property.

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.

Read more about it in Field.Password.