Input

input

body {
  margin: 0;
}

:global(.inputs) {
  display: flex;
  flex-flow: column wrap;
  max-height: 100vh;
  margin-top: 8px;

  & > div {
    margin: 0 16px;
  }
}

div:global(.dark) {
  background: #000;
  margin-left: 0;
  padding-left: 16px;
}

<div id="inputs"></div>

import {render} from 'react-dom';
import React, {PureComponent} from 'react';

import Input, {Size, Theme} from '@jetbrains/ring-ui/components/input/input';

const container = document.getElementById('inputs');

class ClearableInput extends PureComponent {
  state = {
    text: this.props.defaultValue
  };

  setText = e => {
    this.setState({
      text: e.target.value
    });
  };

  clear = () => {
    this.setState({
      text: ""
    });
  };

  render() {
    const {defaultValue, ...restProps} = this.props; // eslint-disable unused-vars
    return (
      <Input
        value={this.state.text}
        onChange={this.setText}
        onClear={this.clear}
        {...restProps}
      />
    );
  }
}

const inputs = (
  <form className="inputs">
    <Input label="Labeled input" />
    <Input
      name="login"
      label="Label and hint"
      placeholder="Hint"
    />
    <Input
      label="Label and value"
      defaultValue="Default value"
    />
    <ClearableInput
      label="Clearable input"
      defaultValue="Default value"
    />
    <ClearableInput
      placeholder="Hint"
      label="Disabled clearable input"
      defaultValue="Default value"
      disabled
    />
    <ClearableInput
      placeholder="Hint"
      defaultValue="Borderless input"
      borderless
    />
    <Input
      label="Active input"
      active
      defaultValue="Default value"
    />
    <Input
      label="Disabled input"
      disabled
      defaultValue="Default value"
    />
    <Input
      label="Invalid input"
      error="Error description that wraps over lines because of being really long"
    />
    <Input
      label="Error without description"
      error=""
    />
    <Input
      label="Short input"
      size={Size.S}
    />
    <Input
      label="Long input"
      size={Size.L}
    />
    <Input
      label="Autogrowing textarea"
      multiline
    />
    <div className="dark">
      <Input
        label="Input on dark background"
        placeholder="Hint on dark background"
        theme={Theme.DARK}
      />
    </div>
  </form>
)

render(inputs, container);