---
tags: zeta-dom-react
---

# Field types

==Since `v0.3.2`==

Field types abstracts logic away from the control component.

It is useful for writing field with the same logic with different visual representation, for example a checkbox v.s. a toggle, or a dropdown v.s. tabs.

When passed to `useFormField`, it returns extra members that facilitate the working of such kind of fields.

## Built-in field types

There are six built-in field types:

| Class | Usage |
| ------------------ | ------------------------------------ |
| `TextField` | Text box |
| `ToggleField` | Checkbox, toggle |
| `ChoiceField` | Dropdown, tabs |
| `MultiChoiceField` | Checkbox list, multi-select dropdown |
| `NumericField` | Number input, slider |
| `DateField` | Date picker |

### `TextField`

function Textbox(props: TextFieldProps) {
    const { value, error, setValue, elementRef, inputProps } = useFormField(TextField, props, '');
    return (
        <label ref={elementRef}>
            <div>{props.label}</div>
            <input {...inputProps} name={props.name} value={value} onChange={e => setValue(e.target.value)} />
            {error && props.showErrorMessage !== false &&
                <div className="error">{error}</div>}
        </label>
    );
}

### `ChoiceField`

### `MultiChoiceField`

interface CheckboxItem extends ChoiceItem<string> {
    disabled?: boolean;
}

function CheckboxList(props: MultiChoiceFieldProps<CheckboxItem>) {
    const { items, value, error, toggleValue, elementRef } = useFormField(MultiChoiceField, props, []);
    return (
        <div ref={elementRef}>
            <span>{props.label}</span>
            {items.map((v, i) => (
                <label key={i}>
                    <input type="checkbox" checked={value.includes(v.value)} onChange={() => toggleValue(v.value)} />
                    <span>{v.label}</span>
                </label>
            ))}
            {error && props.showErrorMessage !== false &&
                <div className="error">{error}</div>}
        </div>
    );
}

### `ToggleField`

### `NumericField`

==Since `v0.4.1`==

### `DateField`

==Since `v0.4.2`==

## Writing custom field type