InputDecorator

This component is a utility component designed for the Input component.

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>

Since InputDecorator is a utility component, using it outside the input component will just render the content of the decorator:

Decorator without the input component


<InputDecorator>
  Decorator without the input component
</InputDecorator>

Content

The decorator component is intended to be used with the standard svg & img elements or a string as it’s content. Alternatively, you can use third-party icon components such as fontawesome icons .

Text

String

Image Element

SVG Element

Text

String

Image Element

SVG Element

Expand code


<Input label={'String'} variant={'outlined'}>
  <InputDecorator>
    Text
  </InputDecorator>
</Input>
 
<Input label={'Image Element'} variant={'outlined'}>
  <InputDecorator>
    <img src={'/icons/eye-solid.png'} alt={'input icon'} width={20} height={18}/>
  </InputDecorator>
</Input>
 
<Input label={'SVG Element'} variant={'outlined'}>
  <InputDecorator>
    <svg width={20} height={20}>
      <use href={'/icons/eye-solid.svg#eye'}/>
    </svg>
  </InputDecorator>
</Input>
 
<Input label={'String'} variant={'basic'}>
  <InputDecorator>
    Text
  </InputDecorator>
</Input>
 
<Input label={'Image Element'} variant={'basic'}>
  <InputDecorator>
    <img src={'/icons/eye-solid.png'} alt={'input icon'} width={20} height={18}/>
  </InputDecorator>
</Input>
 
<Input label={'SVG Element'} variant={'basic'}>
  <InputDecorator>
    <svg width={20} height={20}>
      <use href={'/icons/eye-solid.svg#eye'}/>
    </svg>
  </InputDecorator>
</Input>

Note that as the content length increases, the input field size will decrease.
Consider using the helpText prop of the input component for longer texts.

Position

The position prop allows you to define whether the decorator should be a prefix or suffix (default).

start

Outlined

end

Outlined

start

Basic

end

Basic

Expand code


<Input label={'Outlined'} variant={'outlined'}>
  <InputDecorator position={'start'}>
    start
  </InputDecorator>
</Input>
 
<Input label={'Outlined'} variant={'outlined'}>
  <InputDecorator position={'end'}>
    end
  </InputDecorator>
</Input>
 
<Input label={'Basic'} variant={'basic'}>
  <InputDecorator position={'start'}>
    start
  </InputDecorator>
</Input>
 
<Input label={'Basic'} variant={'basic'}>
  <InputDecorator position={'end'}>
    end
  </InputDecorator>
</Input>

Hidden Decorator

The decorator can be hidden when the input is neither focused nor contains a value.

Outlined

Basic

Expand code


<Input label={'Outlined'} variant={'outlined'}>
  <InputDecorator onFocus>
    <svg width={20} height={20}>
      <use href={'/icons/eye-solid.svg#eye'}/>
    </svg>
  </InputDecorator>
</Input>
 
<Input label={'Basic'} variant={'basic'}>
  <InputDecorator onFocus>
    <svg width={20} height={20}>
      <use href={'/icons/eye-solid.svg#eye'}/>
    </svg>
  </InputDecorator>
</Input>

Props

Name	Type	Default	Description
children	`node`	-	Content of the component
onFocus	`boolean`	false	Only shows the component when focusing on the parent `input`
position	`start` \| `end`	end	Position of the component