Field

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

Соберите Field.Label, Field.Control, Field.Description и Field.Error. error отмечает ошибочное состояние. Тексты Field.Description и Field.Error связываются с контролом через aria-describedby; собственный error контрола не затирается.

Живой пример

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

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

'use client';

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

function Example() {
  const [value, setValue] = useState('');
  return (
    <Field error={!value}>
      <Field.Label>Label</Field.Label>
      <Field.Control>
        <Input>
          <Input.Control
            value={value}
            onChange={setValue}
            placeholder='Placeholder'
          />
        </Input>
      </Field.Control>
      <Field.Description>Description</Field.Description>
      {!value && <Field.Error>Fill in the field</Field.Error>}
    </Field>
  );
}

API компонента

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

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

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