Input

Alternative to basic HTML input

Basic usage

<Input />

<Input />

Sizes

<WrapperHorizontal>
  <Input size="small" />
  <Input size="medium" />
  <Input size="large" />
</WrapperHorizontal>

<WrapperHorizontal>
  <Input size="small" />
  <Input size="medium" />
  <Input size="large" />
</WrapperHorizontal>

Full width

<Input isFullWidth />

<Input isFullWidth />

Other props

isRound

<Input isRound />

<Input isRound />

Prefix & sufix

<WrapperHorizontal>
  <Input prefix={<Icon name={'close'} />} />
  <Input suffix={<Icon name={'close'} />} />
</WrapperHorizontal>

<WrapperHorizontal>
  <Input prefix={<Icon name={'close'} />} />
  <Input suffix={<Icon name={'close'} />} />
</WrapperHorizontal>

Other views

Floating label

<WrapperHorizontal>
  <InputFloatingLabel label={'Input label'} size="small" />
  <InputFloatingLabel label={'Input label'} size="medium" />
  <InputFloatingLabel label={'Input label'} size="large" />
</WrapperHorizontal>

<WrapperHorizontal>
  <InputFloatingLabel label={'Input label'} size="small" />
  <InputFloatingLabel label={'Input label'} size="medium" />
  <InputFloatingLabel label={'Input label'} size="large" />
</WrapperHorizontal>

Hooks variants

It's highly reccomended to use custom hooks instead default ones provided by this lib, for more info see know bugs section

import { Input, useInputChange, useInputClearable } from '@atlasgroup/react-atlantic';
import { wrap } from '@atlasgroup/react-wrap';

export const Inputs = {
    Default: wrap(Input, useInputChange),
    Clearable: wrap(Input, useInputClearable),
};

useInputChange

<WrapperHorizontal>
  <Inputs.Default isDisabled />
  <Inputs.Default defaultValue="Super input" />
</WrapperHorizontal>

<WrapperHorizontal>
  <Inputs.Default isDisabled />
  <Inputs.Default defaultValue="Super input" />
</WrapperHorizontal>

useInputClearable

<WrapperHorizontal>
  <Inputs.Clearable isDisabled />
  <Inputs.Clearable defaultValue="Super input" />
</WrapperHorizontal>

<WrapperHorizontal>
  <Inputs.Clearable isDisabled />
  <Inputs.Clearable defaultValue="Super input" />
</WrapperHorizontal>

Known bugs

useInputClearable clears value on input click
hooks do not accept nor pass props that are not handled by them
useInputFloatingLabel wraps useInputDefault nothing else
InputFloatingLabel label overlflows input value

<Inputs.Clearable defaultValue="Value to be cleared" />
<InputFloatingLabel
  value="Value to be cleared"
  label={'text which overflows value'}
/>

<Inputs.Clearable defaultValue="Value to be cleared" />
<InputFloatingLabel
  value="Value to be cleared"
  label={'text which overflows value'}
/>

Input

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Basic usage

Basic usage