Skip to content

Add Radio and Toggle form fields (closes #160)#388

Draft
MukundaKatta wants to merge 1 commit intopydantic:mainfrom
MukundaKatta:feat/radios-toggle-buttons
Draft

Add Radio and Toggle form fields (closes #160)#388
MukundaKatta wants to merge 1 commit intopydantic:mainfrom
MukundaKatta:feat/radios-toggle-buttons

Conversation

@MukundaKatta
Copy link
Copy Markdown

Summary

Closes #160. Adds two requested form fields: Radio (radio button group) and Toggle (on/off switch).

What's added

  • FormFieldRadio — radio button group with optional inline flag
  • FormFieldToggle — dedicated on/off switch with optional on_label/off_label

Files changed (13)

TypeScript:

  • src/npm-fastui/src/components/FormField.tsx, components/index.tsx, models.d.ts
  • src/npm-fastui-bootstrap/src/index.tsx
  • src/npm-fastui-bootstrap/src/Radio.tsx (new)
  • src/npm-fastui-bootstrap/src/Toggle.tsx (new)

Python:

  • fastui/components/forms.py, components/__init__.py, forms.pyRadio() / Toggle() helpers
  • json_schema.py — radio/toggle dispatch + $ref sibling-key preservation

Tests:

  • tests/test_forms.py — 5 new tests

Test plan

  • TS: npm run typecheck clean, npm run lint clean (0 errors), prettier clean
  • Python: ruff format --check passes, ruff check clean on diff (1 preexisting error in unchanged code)
  • pytest 67 passed (2 preexisting auth-github failures are env-only, unrelated)

Closes pydantic#160. Adds two new form field components:

- FormFieldRadio: renders a string-Enum/Literal field as a radio button
  group. Triggered by `Radio()` (or json_schema_extra={"format": "radio"})
  on the Pydantic field. Supports `inline` for horizontal layout.
- FormFieldToggle: dedicated on/off switch component. Triggered by
  `Toggle()` (or json_schema_extra={"format": "toggle"}). Optional
  on_label / off_label render next to the switch.

Multi-value fields (list[Enum]) annotated with Radio() fall back to the
existing select component, since radios can't represent multi-select.

Frontend:
- src/npm-fastui/src/components/FormField.tsx: new FormFieldRadioComp
  and FormFieldToggleComp following the existing FormFieldBooleanComp /
  FormFieldSelectVanillaComp patterns. Pre-computes useClassName values
  to satisfy react-hooks/rules-of-hooks.
- src/npm-fastui/src/components/index.tsx: wires the new types into the
  AnyComp switch.
- src/npm-fastui/src/models.d.ts: matching TypeScript interfaces.
- src/npm-fastui-bootstrap/src/index.tsx: Bootstrap classNameGenerator
  cases for `form-check`, `form-switch`, radio sub-elements.
- src/npm-fastui-bootstrap/src/Radio.tsx, Toggle.tsx: thin re-export
  wrappers (matches the layout of modal.tsx / navbar.tsx).

Python:
- src/python-fastui/fastui/components/forms.py: FormFieldRadio /
  FormFieldToggle Pydantic models with `type` discriminator.
- src/python-fastui/fastui/forms.py: Radio() / Toggle() helper
  functions that mirror the existing Textarea() helper.
- src/python-fastui/fastui/json_schema.py: dispatch on format='radio'
  (string + enum) and format='toggle' (boolean). Also preserve outer
  `format` keys when dereferencing $ref so per-field overrides survive.

Tests:
- src/python-fastui/tests/test_forms.py: 5 new tests covering radio
  field schema output, radio submit, invalid value, toggle schema
  output, and the multi-radio fallback to select.
@codecov
Copy link
Copy Markdown

codecov Bot commented Apr 25, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Radios and Toggle Buttons

1 participant