Radio buttons

demo/forms.py

@@ -123,6 +123,7 @@ class ToolEnum(str, enum.Enum):
 
 class SelectForm(BaseModel):
  select_single: ToolEnum = Field(title='Select Single')
+ select_radio: ToolEnum = Field(title='Select Radio', json_schema_extra={'mode': 'radio'})
  select_multiple: list[ToolEnum] = Field(title='Select Multiple')
  search_select_single: str = Field(json_schema_extra={'search_url': '/api/forms/search'})
  search_select_multiple: list[str] = Field(json_schema_extra={'search_url': '/api/forms/search'})

src/npm-fastui-bootstrap/src/index.tsx

@@ -75,6 +75,7 @@ export const classNameGenerator: ClassNameGenerator = ({
  case 'FormFieldBoolean':
  case 'FormFieldSelect':
  case 'FormFieldSelectSearch':
+ case 'FormFieldRadio':
  case 'FormFieldFile':
  switch (subElement) {
  case 'textarea':

src/npm-fastui/src/components/FormField.tsx

@@ -12,6 +12,7 @@ import type {
  SelectOption,
  SelectOptions,
  SelectGroup,
+ FormFieldRadio,
 } from '../models'
 
 import { useClassName } from '../hooks/className'
@@ -304,6 +305,62 @@ export const FormFieldSelectSearchComp: FC<FormFieldSelectSearchProps> = (props)
  )
 }
 
+interface FormFieldRadioProps extends FormFieldRadio {
+ onChange?: PrivateOnChange
+}
+
+export const FormFieldRadioComp: FC<FormFieldRadioProps> = (props) => {
+ const { name, required, locked, options, initial } = props
+ const className = useClassName(props)
+ const inputClassName = useClassName(props, { el: 'radio-option' })
+
+ return (
+ <div className={className}>
+ <Label {...props} />
+ {options.map((option, i) => {
+ if ('options' in option) {
+ // option is a SelectGroup
+ return option.options.map((subOption, j) => (
+ <div key={`${i}-${j}`}>
+ <input
+ type="radio"
+ id={`${inputId(props)}-${i}-${j}`}
+ className={inputClassName}
+ name={name}
+ value={subOption.value}
+ defaultChecked={subOption.value === initial}
+ required={required}
+ disabled={locked}
+ aria-describedby={descId(props)}
+ />
+ <label htmlFor={`${inputId(props)}-${i}-${j}`}>{subOption.label}</label>
+ </div>
+ ))
+ } else {
+ // option is a SelectOption
+ return (
+ <div key={i}>
+ <input
+ type="radio"
+ id={`${inputId(props)}-${i}`}
+ className={inputClassName}
+ name={name}
+ value={option.value}
+ defaultChecked={option.value === initial}
+ required={required}
+ disabled={locked}
+ aria-describedby={descId(props)}
+ />
+ <label htmlFor={`${inputId(props)}-${i}`}>{option.label}</label>
+ </div>
+ )
+ }
+ })}
+ <ErrorDescription {...props} />
+ </div>
+ )
+}
+
 const Label: FC<FormFieldProps> = (props) => {
  let { title } = props
  if (!Array.isArray(title)) {
@@ -327,6 +384,7 @@ export type FormFieldProps =
  | FormFieldFileProps
  | FormFieldSelectProps
  | FormFieldSelectSearchProps
+ | FormFieldRadio
 
 const inputId = (props: FormFieldProps) => `form-field-${props.name}`
 const descId = (props: FormFieldProps) => (props.description ? `${inputId(props)}-desc` : undefined)

src/npm-fastui/src/components/index.tsx

@@ -21,6 +21,7 @@ import {
  FormFieldSelectComp,
  FormFieldSelectSearchComp,
  FormFieldFileComp,
+ FormFieldRadioComp,
 } from './FormField'
 import { ButtonComp } from './button'
 import { LinkComp, LinkRender } from './link'
@@ -136,6 +137,8 @@ export const AnyComp: FC<FastProps> = (props) => {
  return <FormFieldSelectComp {...props} />
  case 'FormFieldSelectSearch':
  return <FormFieldSelectSearchComp {...props} />
+ case 'FormFieldRadio':
+ return <FormFieldRadioComp {...props} />
  case 'Modal':
  return <ModalComp {...props} />
  case 'Table':

src/npm-fastui/src/models.d.ts

@@ -38,6 +38,7 @@ export type FastProps =
  | FormFieldFile
  | FormFieldSelect
  | FormFieldSelectSearch
+ | FormFieldRadio
  | ModelForm
 export type ClassName =
  | string
@@ -324,6 +325,7 @@ export interface Form {
  | FormFieldFile
  | FormFieldSelect
  | FormFieldSelectSearch
+ | FormFieldRadio
  )[]
  type: 'Form'
 }
@@ -422,6 +424,19 @@ export interface FormFieldSelectSearch {
  placeholder?: string
  type: 'FormFieldSelectSearch'
 }
+export interface FormFieldRadio {
+ name: string
+ title: string[] | string
+ required?: boolean
+ error?: string
+ locked?: boolean
+ description?: string
+ displayMode?: 'default' | 'inline'
+ className?: ClassName
+ options: SelectOptions
+ initial?: string
+ type: 'FormFieldRadio'
+}
 export interface ModelForm {
  submitUrl: string
  initial?: {
@@ -441,5 +456,6 @@ export interface ModelForm {
  | FormFieldFile
  | FormFieldSelect
  | FormFieldSelectSearch
+ | FormFieldRadio
  )[]
 }

src/python-fastui/fastui/components/__init__.py

@@ -21,6 +21,7 @@
  FormFieldBoolean,
  FormFieldFile,
  FormFieldInput,
+ FormFieldRadio,
  FormFieldSelect,
  FormFieldSelectSearch,
  ModelForm,
@@ -65,6 +66,7 @@
  'FormFieldInput',
  'FormFieldSelect',
  'FormFieldSelectSearch',
+ 'FormFieldRadio',
 )
 
 

src/python-fastui/fastui/components/forms.py

@@ -73,8 +73,20 @@ class FormFieldSelectSearch(BaseFormField):
  type: _t.Literal['FormFieldSelectSearch'] = 'FormFieldSelectSearch'
 
 
+class FormFieldRadio(BaseFormField):
+ options: forms.SelectOptions
+ initial: _t.Union[str, None] = None
+ type: _t.Literal['FormFieldRadio'] = 'FormFieldRadio'
+
+
 FormField = _t.Union[
- FormFieldInput, FormFieldTextarea, FormFieldBoolean, FormFieldFile, FormFieldSelect, FormFieldSelectSearch
+ FormFieldInput,
+ FormFieldTextarea,
+ FormFieldBoolean,
+ FormFieldFile,
+ FormFieldSelect,
+ FormFieldSelectSearch,
+ FormFieldRadio,
 ]
 
 

src/python-fastui/fastui/json_schema.py

@@ -10,6 +10,7 @@
  FormFieldBoolean,
  FormFieldFile,
  FormFieldInput,
+ FormFieldRadio,
  FormFieldSelect,
  FormFieldSelectSearch,
  FormFieldTextarea,
@@ -259,16 +260,26 @@ def special_string_field(
  )
  elif enum := schema.get('enum'):
  enum_labels = schema.get('enum_labels', {})
- return FormFieldSelect(
- name=name,
- title=title,
- placeholder=schema.get('placeholder'),
- required=required,
- multiple=multiple,
- options=[SelectOption(value=v, label=enum_labels.get(v) or as_title(v)) for v in enum],
- initial=schema.get('default'),
- description=schema.get('description'),
- )
+ if schema.get('mode') == 'radio' and not multiple:
+ return FormFieldRadio(
+ name=name,
+ title=title,
+ required=required,
+ options=[SelectOption(value=v, label=enum_labels.get(v) or as_title(v)) for v in enum],
+ initial=schema.get('default'),
+ description=schema.get('description'),
+ )
+ else:
+ return FormFieldSelect(
+ name=name,
+ title=title,
+ placeholder=schema.get('placeholder'),
+ required=required,
+ multiple=multiple,
+ options=[SelectOption(value=v, label=enum_labels.get(v) or as_title(v)) for v in enum],
+ initial=schema.get('default'),
+ description=schema.get('description'),
+ )
  elif search_url := schema.get('search_url'):
  return FormFieldSelectSearch(
  search_url=search_url,

src/python-fastui/tests/test_forms.py

@@ -1,12 +1,13 @@
 from contextlib import asynccontextmanager
+from enum import Enum
 from io import BytesIO
 from typing import List, Tuple, Union
 
 import pytest
 from fastapi import HTTPException
 from fastui import components
 from fastui.forms import FormFile, Textarea, fastui_form
-from pydantic import BaseModel
+from pydantic import BaseModel, Field
 from starlette.datastructures import FormData, Headers, UploadFile
 from typing_extensions import Annotated
 
@@ -469,3 +470,72 @@ def test_form_textarea_form_fields():
  }
  ],
  }
+
+
+class Choices(Enum):
+ foo = 'foo'
+ bar = 'bar'
+ baz = 'baz'
+
+
+class FormRadioSelection(BaseModel):
+ choice: Choices = Field(..., json_schema_extra={'mode': 'radio'})
+
+
+def test_form_radio_form_fields():
+ m = components.ModelForm(model=FormRadioSelection, submit_url='/foobar/')
+
+ assert m.model_dump(by_alias=True, exclude_none=True) == {
+ 'submitUrl': '/foobar/',
+ 'method': 'POST',
+ 'type': 'ModelForm',
+ 'formFields': [
+ {
+ 'name': 'choice',
+ 'title': ['Choices'],
+ 'required': True,
+ 'locked': False,
+ 'type': 'FormFieldRadio',
+ 'options': [
+ {'label': 'Foo', 'value': 'foo'},
+ {'label': 'Bar', 'value': 'bar'},
+ {'label': 'Baz', 'value': 'baz'},
+ ],
+ }
+ ],
+ }
+
+
+@pytest.mark.parametrize('multiple', [True, False])
+def test_form_from_select(multiple: bool):
+ if multiple:
+
+ class FormSelect(BaseModel):
+ choices: List[Choices]
+ else:
+
+ class FormSelect(BaseModel):
+ choice: Choices
+
+ m = components.ModelForm(model=FormSelect, submit_url='/foobar/')
+
+ assert m.model_dump(by_alias=True, exclude_none=True) == {
+ 'submitUrl': '/foobar/',
+ 'method': 'POST',
+ 'type': 'ModelForm',
+ 'formFields': [
+ {
+ 'name': 'choices' if multiple else 'choice',
+ 'multiple': multiple,
+ 'title': ['Choices'],
+ 'required': True,
+ 'locked': False,
+ 'type': 'FormFieldSelect',
+ 'options': [
+ {'label': 'Foo', 'value': 'foo'},
+ {'label': 'Bar', 'value': 'bar'},
+ {'label': 'Baz', 'value': 'baz'},
+ ],
+ }
+ ],
+ }