> This page is for Developer. > For clean Markdown of any page, append .md to the page URL. > For a complete documentation index, see https://docs.makeswift.com/llms.txt. > For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.makeswift.com/_mcp/server. # IconRadioGroup > Adds an icon-based radio group panel in the Makeswift builder to visually select a `string` value from a set of icon options. Adds an icon-based radio group panel in the Makeswift builder to visually select a `string` value from a set of icon options. ![](/_fern-img/6f79f130a83df75381b0c7ac78298738842131c8a7ecd6493907b89ffd28f89f.webp) ## Params **`label`** `string` Text for the panel label in the Makeswift builder. --- **`options`** `IconRadioGroupOption[]` — required A non-empty array of options displayed as selectable icons in the panel. ```ts type IconRadioGroupOption = { value: T; label: string; icon: IconRadioGroupIcon; }; ``` The `label` is shown as a tooltip in the builder. The `icon` determines which icon is rendered for the option — use a kebab-case string (e.g. `'align-left'`) or the `IconRadioGroup.Icon` accessor (e.g. `IconRadioGroup.Icon.AlignLeft`). --- **`defaultValue`** `T` The value passed to your component when nothing is set in the Makeswift builder. --- ## Prop type The IconRadioGroup control passes the generic type `T` from the selected option to your component. If you don't set a `defaultValue` and no value is set in the builder, your component receives `undefined`. ## Example The following example adds an IconRadioGroup control to the `alignment` prop of a TextBlock component using bare kebab-case strings. **`TextBlock.makeswift.ts`** ```tsx TextBlock.makeswift.ts import { IconRadioGroup } from "@makeswift/runtime/controls"; import { runtime } from "@/makeswift/runtime"; import { TextBlock } from "./TextBlock"; runtime.registerComponent(TextBlock, { type: "text-block", label: "Text Block", props: { alignment: IconRadioGroup({ label: "Alignment", options: [ { value: "left", label: "Left", icon: "text-align-left" }, { value: "center", label: "Center", icon: "text-align-center" }, { value: "right", label: "Right", icon: "text-align-right" }, { value: "justify", label: "Justify", icon: "text-align-justify" }, ], defaultValue: "left", }), }, }); ``` **`TextBlock.tsx`** ```tsx TextBlock.tsx interface Props { alignment?: "left" | "center" | "right" | "justify"; } export function TextBlock({ alignment = "left" }: Props) { return (

This text block supports configurable alignment.

); } ``` ## Icons Access icons via `IconRadioGroup.Icon` or pass a bare kebab-case string. The following icons are available: | Preview | Value | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ | | | `activity` | | | `align-center` | | | `align-left` | | | `align-right` | | | `arrow-center` | | | `arrow-down-up` | | | `arrow-inside` | | | `arrow-outside` | | | `arrow-right` | | | `arrows-up-down` | | | `aspect-standard` | | | `aspect-wide` | | | `audio` | | | `billing` | | | `blank-page` | | | `border-dashed` | | | `border-dotted` | | | `border-solid` | | | `button-pill` | | | `button-rounded` | | | `button-square` | | | `chat` | | | `chat-ai` | | | `checkbox` | | | `checkmark` | | | `clock` | | | `code` | | | `cog` | | | `connection` | | | `corners` | | | `countdown-solid` | | | `cube` | | | `database` | | | `deny` | | | `desktop` | | | `document` | | | `download` | | | `drop` | | | `dropdown` | | | `duplicate` | | | `ellipsis` | | | `email` | | | `eye` | | | `file` | | | `file-upload` | | | `folder` | | | `folder-arrow` | | | `folder-upload` | | | `gallery` | | | `globe` | | | `globe-ai` | | | `gradient-linear` | | | `gradient-radial` | | | `graph` | | | `grid-circles` | | | `height-auto` | | | `height-match` | | | `help` | | | `help-circle` | | | `hidden` | | | `image` | | | `info` | | | `italic` | | | `key` | | | `keyboard` | | | `link` | | | `logo-angellist` | | | `logo-apple` | | | `logo-bigcommerce` | | | `logo-bynder` | | | `logo-codepen` | | | `logo-codesandbox` | | | `logo-discord` | | | `logo-dribbble` | | | `logo-facebook` | | | `logo-github` | | | `logo-google` | | | `logo-instagram` | | | `logo-linkedin` | | | `logo-mastodon` | | | `logo-medium` | | | `logo-messenger` | | | `logo-nextjs` | | | `logo-nextjs-outline` | | | `logo-notion` | | | `logo-pinterest` | | | `logo-reddit` | | | `logo-slack` | | | `logo-snapchat` | | | `logo-soundcloud` | | | `logo-spotify` | | | `logo-telegram` | | | `logo-tiktok` | | | `logo-twitch` | | | `logo-vimeo` | | | `logo-whatsapp` | | | `logo-x` | | | `logo-yelp` | | | `logo-youtube` | | | `logout` | | | `minus` | | | `mobile` | | | `moon` | | | `multi-select` | | | `number` | | | `offline` | | | `pencil` | | | `percent` | | | `phone` | | | `plus` | | | `popout` | | | `publish` | | | `px` | | | `radio-button` | | | `redirect` | | | `redo` | | | `rename` | | | `repeat-x` | | | `repeat-xy` | | | `repeat-y` | | | `reset` | | | `retry` | | | `rss` | | | `search` | | | `settings` | | | `shadow-inner` | | | `shadow-outer` | | | `share` | | | `sidebar-closed` | | | `sidebar-open` | | | `sides` | | | `sparkles` | | | `star` | | | `star-circle` | | | `strikethrough` | | | `subscript` | | | `sun` | | | `superscript` | | | `swap` | | | `tablet` | | | `template` | | | `test-tube` | | | `text` | | | `text-ai` | | | `text-align-center` | | | `text-align-justify` | | | `text-align-left` | | | `text-align-right` | | | `text-input` | | | `times` | | | `trash` | | | `underline` | | | `undo` | | | `upload` | | | `uppercase` | | | `user` | | | `users` | | | `vertical-align-end` | | | `vertical-align-middle` | | | `vertical-align-space-between` | | | `vertical-align-start` | | | `video` | | | `warning` | > **Info** > > `.makeswift.ts` is a naming convention for organizing Makeswift registration code. [Learn more](/developer/docs/reference/reactruntime/register-component#organizing-registration-code).