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.

Suggest an edit