Form

<Form>
  <Form.Group widths="equal">
    <Form.Input
      fluid
      placeholder="Подсказка"
      value="Значение значение значение"
    />
    <Form.Input
      fluid
      placeholder="Подсказка"
      value="Значение значение значение"
      disabled
    />
    <Form.Input
      fluid
      placeholder="Подсказка"
      value="Значение значение значение"
      error="Ошибка!"
    />
    <Form.Input
      fluid
      placeholder="Подсказка"
      value="Значение значение значение"
      loading
    />
  </Form.Group>
  <Form.Group widths="equal">
    <Form.TextArea placeholder="Подсказка" value="Hello world" />
    <Form.TextArea placeholder="Подсказка" disabled value="Hello world" />
    <Form.TextArea
      placeholder="Подсказка"
      error="Ошибка!"
      value="Hello world"
    />
    <Form.TextArea
      placeholder="Подсказка"
      loading
      loadingPlaceholderText="Загрузка..."
      value="Hello world"
    />
  </Form.Group>
  <Form.Group widths="equal">
    <Form.Autocomplete
      options={[
        { id: 1, header: 'Республика Коми' },
        { id: 2, header: 'Республика Саха' },
        { id: 3, header: 'Республика Марий Эл' },
        { id: 4, header: 'Республика Мордовия' },
      ]}
      placeholder="Начните вводить"
      fluid
    />
    <Form.Autocomplete
      options={[
        { id: 1, header: 'Республика Коми' },
        { id: 2, header: 'Республика Саха' },
        { id: 3, header: 'Республика Марий Эл' },
        { id: 4, header: 'Республика Мордовия' },
      ]}
      disabled
      placeholder="Отключен"
      fluid
    />
    <Form.Autocomplete
      options={[
        { id: 1, header: 'Республика Коми' },
        { id: 2, header: 'Республика Саха' },
        { id: 3, header: 'Республика Марий Эл' },
        { id: 4, header: 'Республика Мордовия' },
      ]}
      error="Ошибка!"
      placeholder="С ошибкой"
      fluid
    />
    <Form.Autocomplete
      options={[
        { id: 1, header: 'Республика Коми' },
        { id: 2, header: 'Республика Саха' },
        { id: 3, header: 'Республика Марий Эл' },
        { id: 4, header: 'Республика Мордовия' },
      ]}
      loading
      placeholder="В загрузке"
      fluid
    />
    <Form.Autocomplete
      options={[
        { id: 1, header: 'Республика Коми' },
        { id: 2, header: 'Республика Саха' },
        { id: 3, header: 'Республика Марий Эл' },
        { id: 4, header: 'Республика Мордовия' },
      ]}
      icon="search-icon"
      placeholder="С иконкой"
      fluid
    />
  </Form.Group>
  <Form.Input placeholder="Подсказка" />
  <Form.Input placeholder="Подсказка" disabled />
  <Form.Input placeholder="Подсказка" error="Ошибка!" />
  <Form.Input
    placeholder="Подсказка"
    loadingPlaceholderText="Загрузка..."
    loading
  />
  <Form.TextArea placeholder="Подсказка" />
  <Form.TextArea placeholder="Подсказка" disabled />
  <Form.TextArea placeholder="Подсказка" error="Ошибка!" />
  <Form.TextArea
    placeholder="Подсказка"
    loading
    loadingPlaceholderText="Загрузка..."
  />
  <Form.Input placeholder="Подсказка" value="Значение значение значение" />
  <Form.Input
    placeholder="Подсказка"
    value="Значение значение значение"
    disabled
  />
  <Form.Input
    placeholder="Подсказка"
    value="Значение значение значение"
    error="Ошибка!"
  />
  <Form.Input
    placeholder="Подсказка"
    value="Значение значение значение"
    loading
  />
  <Form.Input
    placeholder="Подсказка"
    value="Значение значение значение"
    icon="database-icon"
  />
  <Form.Input
    placeholder="Подсказка"
    value="Значение значение значение"
    icon="database-icon"
    disabled
  />
  <Form.Input
    placeholder="Подсказка"
    value="Значение значение значение"
    icon="database-icon"
    error="Ошибка!"
  />
  <Form.Input
    placeholder="Подсказка"
    value="Значение значение значение"
    icon="database-icon"
    loading
  />
  <Form.Input
    placeholder="Подсказка"
    value="Значение значение значение"
    action={{
      content: 'Сделать',
      onClick: () => console.log('click'),
    }}
  />
  <Form.Input
    placeholder="Подсказка"
    value="Значение значение значение"
    action={{
      content: 'Сделать',
    }}
    disabled
  />
  <Form.Input
    placeholder="Подсказка"
    value="Значение значение значение"
    action={{
      content: 'Сделать',
      onClick: () => console.log('click'),
    }}
    loading
  />
  <Form.Autocomplete
    options={[
      { id: 1, header: 'Республика Коми' },
      { id: 2, header: 'Республика Саха' },
      { id: 3, header: 'Республика Марий Эл' },
      { id: 4, header: 'Республика Мордовия' },
    ]}
    placeholder="Начните вводить"
  />
  <Form.Autocomplete
    options={[
      { id: 1, header: 'Республика Коми' },
      { id: 2, header: 'Республика Саха' },
      { id: 3, header: 'Республика Марий Эл' },
      { id: 4, header: 'Республика Мордовия' },
    ]}
    disabled
    placeholder="Отключен"
  />
  <Form.Autocomplete
    options={[
      { id: 1, header: 'Республика Коми' },
      { id: 2, header: 'Республика Саха' },
      { id: 3, header: 'Республика Марий Эл' },
      { id: 4, header: 'Республика Мордовия' },
    ]}
    error="Ошибка!"
    placeholder="С ошибкой"
  />
  <Form.Autocomplete
    options={[
      { id: 1, header: 'Республика Коми' },
      { id: 2, header: 'Республика Саха' },
      { id: 3, header: 'Республика Марий Эл' },
      { id: 4, header: 'Республика Мордовия' },
    ]}
    loading
    placeholder="В загрузке"
  />
  <Form.Autocomplete
    options={[
      { id: 1, header: 'Республика Коми' },
      { id: 2, header: 'Республика Саха' },
      { id: 3, header: 'Республика Марий Эл' },
      { id: 4, header: 'Республика Мордовия' },
    ]}
    icon="search-icon"
    placeholder="С иконкой"
  />
  <Form.Group widths="equal">
    <Form.Select
      fluid
      options={[
        {
          id: 0,
          header: 'Яблоко сочное, как арбуз',
          icon: 'tag-icon',
        },
        {
          id: 1,
          header: 'Персик',
          icon: 'babai-icon',
        },
      ]}
      placeholder="Выберите"
      loadingPlaceholder="Загрузка..."
    />
    <Form.Select
      fluid
      options={[
        {
          id: 0,
          header: 'Яблоко сочное, как арбуз',
          icon: 'tag-icon',
        },
        {
          id: 1,
          header: 'Персик',
          icon: 'babai-icon',
        },
      ]}
      disabled
      placeholder="Выберите"
      loadingPlaceholder="Загрузка..."
    />
    <Form.Select
      fluid
      options={[
        {
          id: 0,
          header: 'Яблоко сочное, как арбуз',
          icon: 'tag-icon',
        },
        {
          id: 1,
          header: 'Персик',
          icon: 'babai-icon',
        },
      ]}
      error="Ошибка!"
      placeholder="Выберите"
      loadingPlaceholder="Загрузка..."
    />
    <Form.Select
      fluid
      options={[
        {
          id: 0,
          header: 'Яблоко сочное, как арбуз',
          icon: 'tag-icon',
        },
        {
          id: 1,
          header: 'Персик',
          icon: 'babai-icon',
        },
      ]}
      loading
      placeholder="Выберите"
      loadingPlaceholder="Загрузка..."
    />
  </Form.Group>
  <Form.Group widths="equal">
    <Form.Select
      fluid
      options={[
        {
          id: 0,
          header: 'Яблоко сочное, как арбуз',
          icon: 'tag-icon',
        },
        {
          id: 1,
          header: 'Персик',
          icon: 'babai-icon',
        },
      ]}
      value={{
        id: 0,
        header: 'Яблоко сочное, как арбуз',
        icon: 'tag-icon',
      }}
      placeholder="Выберите"
      loadingPlaceholder="Загрузка..."
    />
    <Form.Select
      fluid
      options={[
        {
          id: 0,
          header: 'Яблоко сочное, как арбуз',
          icon: 'tag-icon',
        },
        {
          id: 1,
          header: 'Персик',
          icon: 'babai-icon',
        },
      ]}
      value={{
        id: 0,
        header: 'Яблоко сочное, как арбуз',
        icon: 'tag-icon',
      }}
      disabled
      placeholder="Выберите"
      loadingPlaceholder="Загрузка..."
    />
    <Form.Select
      fluid
      options={[
        {
          id: 0,
          header: 'Яблоко сочное, как арбуз',
          icon: 'tag-icon',
        },
        {
          id: 1,
          header: 'Персик',
          icon: 'babai-icon',
        },
      ]}
      value={{
        id: 0,
        header: 'Яблоко сочное, как арбуз',
        icon: 'tag-icon',
      }}
      error="Ошибка!"
      placeholder="Выберите"
      loadingPlaceholder="Загрузка..."
    />
    <Form.Select
      fluid
      options={[
        {
          id: 0,
          header: 'Яблоко сочное, как арбуз',
          icon: 'tag-icon',
        },
        {
          id: 1,
          header: 'Персик',
          icon: 'babai-icon',
        },
      ]}
      value={{
        id: 0,
        header: 'Яблоко сочное, как арбуз',
        icon: 'tag-icon',
      }}
      loading
      placeholder="Выберите"
      loadingPlaceholder="Загрузка..."
    />
  </Form.Group>
</Form>

<Form>
  <Form.Field
    id="name"
    control={Form.Input}
    placeholder="Подсказка"
    label="Имя"
  />
  <Form.Field
    id="name2"
    error="Ошибка"
    control={Form.Input}
    placeholder="Подсказка"
    label="Имя"
  />
  <Form.Field
    id="description"
    control={Form.TextArea}
    placeholder="Подсказка"
    label="Описание"
  />
  <Form.Field
    id="description2"
    error="Ошибка"
    control={Form.TextArea}
    placeholder="Подсказка"
    label="Описание"
  />
  <Form.Field
    id="autocomplete"
    label="Субъект РФ"
    control={Form.Autocomplete}
    options={[
      { id: 1, header: 'Республика Коми' },
      { id: 2, header: 'Республика Саха' },
      { id: 3, header: 'Республика Марий Эл' },
      { id: 4, header: 'Республика Мордовия' },
    ]}
    placeholder="Начните вводить"
  />
  <Form.Field
    id="autocomplete2"
    label="Субъект РФ"
    control={Form.Autocomplete}
    options={[
      { id: 1, header: 'Республика Коми' },
      { id: 2, header: 'Республика Саха' },
      { id: 3, header: 'Республика Марий Эл' },
      { id: 4, header: 'Республика Мордовия' },
    ]}
    error="Ошибка!"
    placeholder="С ошибкой"
  />
  <Form.Field
    id="select1"
    control={Form.Select}
    placeholder="Подсказка"
    label="Выбор"
    options={[
      {
        id: 0,
        header: 'Яблоко сочное, как арбуз',
        icon: 'tag-icon',
      },
      {
        id: 1,
        header: 'Персик',
        icon: 'babai-icon',
      },
    ]}
  />
  <Form.Field
    id="select2"
    error="Ошибка"
    control={Form.Select}
    placeholder="Подсказка"
    label="Выбор"
    options={[
      {
        id: 0,
        header: 'Яблоко сочное, как арбуз',
        icon: 'tag-icon',
      },
      {
        id: 1,
        header: 'Персик',
        icon: 'babai-icon',
      },
    ]}
  />
</Form>