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