---
# System prepended metadata

title: Field types
tags: [zeta-dom-react]

---

---
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`

```typescript
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`

```typescript
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
