Back to Compositions

PolarisField

Forms

Thin react-hook-form Controller wrapper. Maps value, onChange, onBlur, and error automatically.

Composed from
TextFieldSelectDateField
Example

Current values: {"title":"","description":""}

Usage
import { useForm } from 'react-hook-form';
import { PolarisField, TextField, Select, Option } from '@/components/polaris';

function Example() {
    const { control } = useForm({
        defaultValues: { title: '', status: 'active' },
    });

    return (
        <form>
            <PolarisField as={TextField} name="title" control={control} label="Product title" />
            <PolarisField as={Select} name="status" control={control} label="Status">
                <Option value="active">Active</Option>
                <Option value="draft">Draft</Option>
            </PolarisField>
        </form>
    );
}
← All CompositionsView Primitives →