Input

error

string | undefined

loadingPlaceholderText

string | undefined

placeholder

string | undefined

icon

string | FunctionComponent<IconProps> | undefined

boolean | undefined

disabled

boolean | undefined

readonly

boolean | undefined

action

any

style

CSSProperties | undefined

fluid

boolean | undefined

className

string | undefined

value

string | undefined

onChange

((event: ChangeEvent<HTMLInputElement>, data: InputOnChangeData) => void) | undefined

onClick

((event: ChangeEvent<HTMLInputElement>) => void) | undefined

input

SemanticShorthandItem<HtmlInputrops>

onFocus

((event: SyntheticEvent<HTMLElement, Event>) => void) | undefined

onBlur

((event: SyntheticEvent<HTMLElement, Event>) => void) | undefined

type

string | undefined

Clear

<div className="docz-space-between">
  <Input placeholder="Подсказка" />
  <Input placeholder="Подсказка" disabled />
  <Input placeholder="Подсказка" error="Ошибка!" />
  <Input
    placeholder="Подсказка"
    loadingPlaceholderText="Загрузка..."
    loading
    input={{ name: 'some input name', id: 'some input id' }}
  />
</div>

<div className="docz-space-between">
  <Input placeholder="Подсказка" />
  <Input placeholder="Подсказка" disabled />
  <Input placeholder="Подсказка" error="Ошибка!" />
  <Input
    placeholder="Подсказка"
    loadingPlaceholderText="Загрузка..."
    loading
    input={{ name: 'some input name', id: 'some input id' }}
  />
</div>

Filled

<div className="docz-space-between">
  <Input placeholder="Подсказка" value="Значение значение значение" />
  <Input
    placeholder="Подсказка"
    value="Значение значение значение"
    disabled
  />
  <Input
    placeholder="Подсказка"
    value="Значение значение значение"
    error="Ошибка!"
  />
  <Input placeholder="Подсказка" value="Значение значение значение" loading />
</div>

<div className="docz-space-between">
  <Input placeholder="Подсказка" value="Значение значение значение" />
  <Input
    placeholder="Подсказка"
    value="Значение значение значение"
    disabled
  />
  <Input
    placeholder="Подсказка"
    value="Значение значение значение"
    error="Ошибка!"
  />
  <Input placeholder="Подсказка" value="Значение значение значение" loading />
</div>

With icon

<div className="docz-space-between">
  <Input
    placeholder="Подсказка"
    value="Значение значение значение"
    icon="database-icon"
  />
  <Input
    placeholder="Подсказка"
    value="Значение значение значение"
    icon="database-icon"
    disabled
  />
  <Input
    placeholder="Подсказка"
    value="Значение значение значение"
    icon="database-icon"
    error="Ошибка!"
  />
  <Input
    placeholder="Подсказка"
    value="Значение значение значение"
    icon="database-icon"
    loading
  />
</div>

<div className="docz-space-between">
  <Input
    placeholder="Подсказка"
    value="Значение значение значение"
    icon="database-icon"
  />
  <Input
    placeholder="Подсказка"
    value="Значение значение значение"
    icon="database-icon"
    disabled
  />
  <Input
    placeholder="Подсказка"
    value="Значение значение значение"
    icon="database-icon"
    error="Ошибка!"
  />
  <Input
    placeholder="Подсказка"
    value="Значение значение значение"
    icon="database-icon"
    loading
  />
</div>

With button

<div className="docz-space-between">
  <Input
    placeholder="Подсказка"
    value="Значение значение значение"
    action={{
      content: 'Сделать',
      onClick: () => console.log('click'),
    }}
  />
  <Input
    placeholder="Подсказка"
    value="Значение значение значение"
    action={{
      content: 'Сделать',
    }}
    disabled
  />
  <Input
    placeholder="Подсказка"
    value="Значение значение значение"
    action={{
      content: 'Сделать',
      onClick: () => console.log('click'),
    }}
    loading
  />
</div>

<div className="docz-space-between">
  <Input
    placeholder="Подсказка"
    value="Значение значение значение"
    action={{
      content: 'Сделать',
      onClick: () => console.log('click'),
    }}
  />
  <Input
    placeholder="Подсказка"
    value="Значение значение значение"
    action={{
      content: 'Сделать',
    }}
    disabled
  />
  <Input
    placeholder="Подсказка"
    value="Значение значение значение"
    action={{
      content: 'Сделать',
      onClick: () => console.log('click'),
    }}
    loading
  />
</div>

Input

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

Filled

With icon

With button

Clear