wcz-layout/skills/forms-validation/references/field-components.md

# Field Components Reference

All field components are accessed via `field.*` inside a `form.AppField` children render prop. Props listed below are the MUI props you can pass — `FormOmittedProps` (`name`, `value`, `onChange`, `onBlur`, `error`, `helperText`, `renderInput`, `type`, `aria-label`) are automatically stripped and managed by TanStack Form.

## TextField

```typescript
<form.AppField
  name="title"
  children={(field) => (
    <field.TextField
      label="Title"
      required
      multiline          // optional: enables textarea
      rows={3}           // optional: fixed row count for multiline
      placeholder="..."  // optional
      disabled           // optional
      slotProps={{        // optional: MUI slot props
        input: { startAdornment: <InputAdornment position="start">$</InputAdornment> }
      }}
    />
  )}
/>
```

## NumberField

```typescript
<form.AppField
  name="quantity"
  children={(field) => (
    <field.NumberField
      label="Quantity"
      required
      slotProps={{
        input: { inputProps: { min: 0, max: 100, step: 1 } }
      }}
    />
  )}
/>
```

## Autocomplete

```typescript
<form.AppField
  name="assignee"
  children={(field) => (
    <field.Autocomplete
      label="Assignee"
      options={users}
      getOptionLabel={(user) => user.displayName}
      isOptionEqualToValue={(option, value) => option.id === value.id}
      multiple               // optional: multi-select
      freeSolo               // optional: allow custom input
      loading={isLoading}    // optional: show loading indicator
    />
  )}
/>
```

## Checkbox

```typescript
<form.AppField
  name="isActive"
  children={(field) => (
    <field.Checkbox
      label="Active"
      disabled  // optional
    />
  )}
/>
```

Renders `FormControlLabel` wrapping MUI `Checkbox`.

## Switch

```typescript
<form.AppField
  name="notifications"
  children={(field) => (
    <field.Switch
      label="Enable Notifications"
      disabled  // optional
    />
  )}
/>
```

Renders `FormControlLabel` wrapping MUI `Switch`.

## RadioGroup

```typescript
<form.AppField
  name="priority"
  children={(field) => (
    <field.RadioGroup
      label="Priority"
      options={[
        { label: "Low", value: "low" },
        { label: "Medium", value: "medium" },
        { label: "High", value: "high" },
      ]}
      row  // optional: horizontal layout
    />
  )}
/>
```

**Warning:** `onChange` returns `event.target.value` as a string. Use string values.

## Slider

```typescript
<form.AppField
  name="rating"
  children={(field) => (
    <field.Slider
      min={0}
      max={10}
      step={1}
      marks
      valueLabelDisplay="auto"
    />
  )}
/>
```

## DatePicker

```typescript
<form.AppField
  name="dueDate"
  children={(field) => (
    <field.DatePicker
      label="Due Date"
      minDate={dayjs()}       // optional
      maxDate={dayjs().add(1, "year")}  // optional
    />
  )}
/>
```

## DateRangePicker

```typescript
<form.AppField
  name="dateRange"
  children={(field) => (
    <field.DateRangePicker
      localeText={{ start: "Start", end: "End" }}
    />
  )}
/>
```

## TimePicker

```typescript
<form.AppField
  name="startTime"
  children={(field) => (
    <field.TimePicker
      label="Start Time"
      ampm={false}  // optional: 24-hour format
    />
  )}
/>
```

## TimeRangePicker

```typescript
<form.AppField
  name="timeRange"
  children={(field) => (
    <field.TimeRangePicker
      localeText={{ start: "From", end: "To" }}
    />
  )}
/>
```

## DateTimePicker

```typescript
<form.AppField
  name="scheduledAt"
  children={(field) => (
    <field.DateTimePicker
      label="Scheduled At"
      ampm={false}
    />
  )}
/>
```

## DateTimeRangePicker

```typescript
<form.AppField
  name="availability"
  children={(field) => (
    <field.DateTimeRangePicker
      localeText={{ start: "From", end: "Until" }}
    />
  )}
/>
```