Field

Обёртка для подписи, контрола, подсказки и ошибки.

Соберите Field.Label, Field.Control, Field.Description. error отмечает ошибочное состояние.

Живой пример

Настройки примера

Использование

'use client';

import { Field, Input } from '@prosazhin/pbcomponents';
import { useState } from 'react';

function Example() {
  const [value, setValue] = useState('');
  return (
    <Field>
      <Field.Label>Label</Field.Label>
      <Field.Control>
        <Input>
          <Input.Control
            value={value}
            onChange={setValue}
            placeholder='Placeholder'
          />
        </Input>
      </Field.Control>
      <Field.Description>Description</Field.Description>
    </Field>
  );
}

API компонента

Составные части: Field.Label, Field.Control, Field.Description.

PropТип / вариантыНазначениеПо умолчанию
childrenReactNodeСоставные части поля: подпись, контрол и подсказка.
errorbooleanПоказывает состояние ошибки.false
htmlForstringСвязывает подпись с полем по id.
disabledbooleanБлокирует взаимодействие.false
classNamestringКласс корневого элемента.

Нативные HTML-атрибуты поддерживаются там, где компонент рендерит соответствующий элемент. Параметры className управляют только оформлением.