#Input

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

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

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

<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"
/>

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

<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"
    />
  </section>
</Flex.Vertical>

<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)
  }}
/>

<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>

<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()
  }}
/>

<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>

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