Input

The input component allows users to enter and edit text.

Variants

The input component offers two distinct variants: outlined and basic.

Outlined

Basic

Expand code


<Input label={'Outlined'} variant={'outlined'}/>
<Input label={'Basic'} variant={'basic'}/>

Input Types

Standard input attributes, like disabled or type can be used to modify the input style.

Required

Disabled

Number

Password

Required

Disabled

Number

Password

Expand code


<Input label={'Required'} variant={'outlined'} required/>
<Input label={'Disabled'} variant={'outlined'} disabled/>
<Input label={'Number'} variant={'outlined'} type={'number'}/>
<Input label={'Password'} variant={'outlined'} type={'password'}/>
 
<Input label={'Required'} variant={'basic'} required/>
<Input label={'Disabled'} variant={'basic'} disabled/>
<Input label={'Number'} variant={'basic'} type={'number'}/>
<Input label={'Password'} variant={'basic'} type={'password'}/>

HelpText

You can use the helpText prop to give additional information about the input.

Outlined

Input with help text

Basic

Input with help text

Expand code


<Input label={'Outlined'} variant={'outlined'} helpText={'Input with help text'}/>
<Input label={'Basic'} variant={'basic'} helpText={'Input with help text'}/>

Please be aware that the helpText prop affects the height of the component. When placing two inputs next to each other, the components may appear with different heights if one of the inputs is missing this prop. To ensure consistent height, you can assign a space character as the value for the helpText prop.

With helpText

Input with help text

Empty helpText


<Input label={'With helpText'} variant={'outlined'} helpText={'Input with help text'}/>
<Input label={'Empty helpText'} variant={'outlined'} helpText={' '}/>

Validation

The error prop allows you to toggle the error state of the component. Additionally, you use the helpText prop to give additional information about the error.

Error

Error message

Error

Error message

Expand code


<Input label={'Error'} variant={'outlined'} error helpText={' '} defaultValue={'Lorem ipsum'}/>
<Input label={'Error'} variant={'outlined'} error helpText={'Error message'} defaultValue={'Lorem ipsum'}/>
 
<Input label={'Error'} variant={'basic'} error helpText={' '} defaultValue={'Lorem ipsum'}/>
<Input label={'Error'} variant={'basic'} error helpText={'Error message'} defaultValue={'Lorem ipsum'}/>

InputDecorator

The InputDecorator component is a utility component that allows you to display additional text or icons inside the input field.
For more information go to the inputDecorator page.

Outlined

.com

Outlined

Basic

.com

Basic

Expand code


<Input label={'Outlined'} variant={'outlined'}>
  <InputDecorator>
    <svg width={20} height={20} fill={'#222222'}>
      <use href={'/icons/eye-solid.svg#eye'}/>
    </svg>
  </InputDecorator>
</Input>
 
<Input label={'Outlined'} variant={'outlined'} defaultValue={'hello-world'}>
  <InputDecorator>
    .com
  </InputDecorator>
</Input>
 
<Input label={'Basic'} variant={'basic'}>
  <InputDecorator>
    <svg width={20} height={20} fill={'#222222'}>
      <use href={'/icons/eye-solid.svg#eye'}/>
    </svg>
  </InputDecorator>
</Input>
 
<Input label={'Basic'} variant={'basic'} defaultValue={'hello-world'}>
  <InputDecorator>
    .com
  </InputDecorator>
</Input>

Props

Name	Type	Default	Description
children	`InputDecorator`	-	Decorator for the input
dark	`boolean`	false	Use the darkmode style
error	`boolean`	false	Toggle the error state
helpText	`string`	-	Set the help text
label	`string`	-	Set the label text
variant	`outlined` \| `basic`	-	The variant to use

In addition to these props the component uses the default html input props (e.g. type & value).