Linked block content
);
}
```
For a static block, apply the shared helper in `save`:
```jsx
{ `Applied: ${ resolvedValue }` }
} ``` ## Behavior [Section titled “Behavior”](#behavior) * The base breakpoint’s value lives in `attrName`; others live in `attrName + suffix`, so `columnGap`, `columnGapTablet`, `columnGapMobile`. * `value` is the active breakpoint’s own value and is `undefined` when it has none. `inheritedValue` is what it would fall back to — bind it to `placeholder` on controls that have one, otherwise surface it through `help`. `resolvedValue` is what actually applies. * Reset writes `undefined`, so the attribute returns to its `block.json` default and disappears from serialized markup. * The reset button never appears on the base breakpoint: its value is not an override. * Editor sync is off unless you opt in, per direction. ## Styling [Section titled “Styling”](#styling) Ships no stylesheet. Layout uses `Flex` from `@wordpress/components`; pass `className` to position the whole row. ## Gotchas [Section titled “Gotchas”](#gotchas) * `children` is a function, not an element. Passing an element renders nothing useful. * Numeric controls: `0` is a real value and will *not* fall back to an inherited value. This is deliberate. Merge with `??` if you must merge at all — `value || inheritedValue` shows the inherited value where `0` was set on purpose. * `RangeControl` has no `placeholder` prop, so passing `inheritedValue` to one does nothing visible: it is spread onto the underlying `` and ignored. Reserve that pattern for `TextControl`/`InputControl` and use `value ?? inheritedValue` plus `help` elsewhere. * Attributes must be declared in `block.json` for every breakpoint you offer — `columnGapTablet` and `columnGapMobile` do not spring into existence. * `syncFromEditor` without `syncToEditor` makes the switcher read-only in practice. Clicking a breakpoint selects it, then the effect that follows the editor’s device preview sees an unchanged device type and reverts the selection — nothing pushed the click outwards for it to agree with. Pass both flags for an interactive switcher tied to the preview, or neither for one that stands alone. ## Related [Section titled “Related”](#related) * [`BreakpointSwitcher`](/reference/components/breakpoint-switcher/) — the switcher alone. * [`useResponsiveAttribute`, `useBreakpoint`](/reference/hooks/) — the pieces underneath. * Decision 0003 — why base plus suffixes, and why there is no `default` breakpoint. # Fields > Advanced mode — compose an options source with a value binding. ## Modules [Section titled “Modules”](#modules) | Module | What it does | Narrowest import | | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | | [`RadioField`](/reference/fields/radio-field/) | A radio-button field that composes an options source and a value binding independently — pick a static list or a dynamic source for the choices, and separately bind the value to post meta, a taxonomy, or a custom store. | `@isudev/gutenberg/fields/RadioField` | | [`SelectField`](/reference/fields/select-field/) | A select field that composes an options source and a value binding independently — pick a static list or a dynamic source for the choices, and separately bind the value to post meta, a taxonomy, or a custom store. | `@isudev/gutenberg/fields/SelectField` | # RadioField > A radio-button field that composes an options source and a value binding independently — pick a static list or a dynamic source for the choices, and separately bind the value to post meta, a taxonomy, or a custom store. ## Summary [Section titled “Summary”](#summary) A radio-button field that composes an options source and a value binding independently — pick a static list or a dynamic source for the choices, and separately bind the value to post meta, a taxonomy, or a custom store. ## When to use / When not to use [Section titled “When to use / When not to use”](#when-to-use--when-not-to-use) Use it when you need a small, always-visible set of choices and the combination of “where the options come from” and “where the value lives” is not one of the built-in easy-mode shapes — for example, options from one taxonomy while the value is written somewhere unrelated. Do not reach for it for the common cases: use `MetaRadioControl` for a radio group bound to post meta. There is no `TaxonomyRadioControl` easy-mode wrapper — compose `optionsSource: { type: 'terms' }` with `valueBinding: { type: 'taxonomy' }` directly, as shown below. Use `SelectField` instead once the option list is long — a dropdown, not a wall of radio buttons, is the better control for a large or dynamic set. ## Import [Section titled “Import”](#import) ```js import { RadioField } from '@isudev/gutenberg/fields'; // or, skipping the barrel: import { RadioField } from '@isudev/gutenberg/fields/RadioField'; ``` ## Props [Section titled “Props”](#props) | Name | Type | Default | Required | Description | | ------------------ | ---------------------------- | ------- | -------- | ------------------------------------------------------------------------------------- | | `options` | `FieldOption[]` | — | No | Static list of choices; takes precedence over `optionsSource`. | | `optionsSource` | `OptionsSource` | — | No | Dynamic source for the choices — `terms`, `posts`, `users`, `postTypes`, or `manual`. | | `valueBinding` | `ValueBinding` | — | No | Where the value is read from and written to — `meta`, `taxonomy`, or `custom`. | | `value` | `unknown` | — | No | Controlled value; when present the field is controlled and `valueBinding` is ignored. | | `onChange` | `( value: unknown ) => void` | — | No | Controlled change handler; its presence alone also makes the field controlled. | | `onValueChange` | `( value: unknown ) => void` | — | No | Called after the resolved `onChange` runs, regardless of binding mode. | | `loadingComponent` | `ReactNode` | — | No | Rendered instead of the control while options or the value are resolving. | | `errorComponent` | `ReactNode` | — | No | Rendered instead of the control when resolving fails. | Every `FieldOption` is `{ label: string; value: string | number; disabled?: boolean }`. ## Examples [Section titled “Examples”](#examples) ### Minimal: static options, controlled value [Section titled “Minimal: static options, controlled value”](#minimal-static-options-controlled-value) ```jsx import { useState } from '@wordpress/element'; import { RadioField } from '@isudev/gutenberg/fields'; const [ size, setSize ] = useState( 'medium' );