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 | Тип / варианты | Назначение | По умолчанию |
|---|---|---|---|
children | ReactNode | Составные части поля: подпись, контрол, подсказка и текст ошибки. | — |
error | boolean | Показывает состояние ошибки. | false |
htmlFor | string | Связывает подпись с полем по id. | — |
disabled | boolean | Блокирует взаимодействие. | false |
className | string | Класс корневого элемента. | — |
Нативные HTML-атрибуты поддерживаются там, где компонент рендерит соответствующий элемент. Параметры className управляют только оформлением.