react-formbridge
Browse documentation
Field buildersv1.0.2

field.radio()

Radio-group builder - all options stay visible at once instead of hiding behind a dropdown.

  • Same underlying SelectFieldBuilder as field.select(), with identical options(), optionsFrom(), and defaultSelected() methods
  • Choose radio when the list is short (2–6 items) and every option should be scannable
  • Choose field.select() when there are too many options for inline display
Radio.tsxtsx
1const schema = {
2 role: field.radio('Role')
3 .options(['Admin','Editor','Viewer'])
4 .required(),
5}

Defaults, inheritance & field methods

  • defaultValue is ''
  • type is radio
  • Reuses the same SelectFieldBuilder as field.select() - all select-specific methods are available (options(), optionsFrom(), searchable(), defaultSelected(), selected())
  • Shared methods: see Base field builder
  • Select-field methods: see field.select()

Radio-specific methods:

MethodTypeDescription
options(list)string[] | { label, value }[]Loads local options from plain strings or explicit label/value objects.
optionsFrom(fetcher, config)fetcher + async configLoads remote options with debounce, cache, dependency tracking, and loading state support.
searchable(value = true)value?: booleanEnables search-oriented radio-picker behavior when a custom picker is used.
defaultSelected(valueOrOption)value | option objectPre-selects an option by raw value or option object.
selected(valueOrOption)value | option objectAlias for defaultSelected() with more explicit wording.
oneOf(values, message?)Array<value | option>Additional allow-list check layered on top of options() - restricts the runtime-accepted values to a narrower subset.
notOneOf(values, message?)Array<value | option>Deny-list version of oneOf(). Rejects specific values even if they remain selectable in the UI.
disallowPlaceholder(message?)message?: stringRadio-oriented alias for required() with the default message "Please select an option.".

Recipes

Patterns that showcase radio-specific use cases.

Billing cadence toggle

Billing.tsxtsx
1const schema = {
2 billing: field.radio('Billing')
3 .options([
4 { label: 'Monthly - $9/mo', value: 'month' },
5 { label: 'Yearly - $90/yr', value: 'year' },
6 ])
7 .defaultSelected('month'),
8}

Role picker

Role.tsxtsx
1const schema = {
2 role: field.radio('Role')
3 .options(['Admin', 'Editor', 'Viewer'])
4 .required(),
5}

Yes/No confirmation

Confirmation.tsxtsx
1const schema = {
2 confirmDeletion: field.radio('Confirm deletion')
3 .options([
4 { label: 'Yes, delete', value: true },
5 { label: 'No, keep', value: false },
6 ])
7 .required(),
8}