# @commercetools-uikit/radio-input > A RadioInput represents a group of options where only one option can be selected at a time. Latest version **20.6.7** (published 2026-07-17) · MIT license · 0 weekly downloads ## Install ```sh npm install @commercetools-uikit/radio-input pnpm add @commercetools-uikit/radio-input yarn add @commercetools-uikit/radio-input bun add @commercetools-uikit/radio-input ``` ## Health **Score 70/100 (B)** — status: active. Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score. Warnings: low downloads. ## Facts | | | |---|---| | Version | 20.6.7 | | Published | 2026-07-17 | | First published | 2019-11-29 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 13 | | Unpacked size | 172.1 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Provenance | attested (GitHub Actions) | | GitHub stars | 154 | | Maintainers | emmenko, commercetools-admin, tdeekens | | Keywords | javascript, typescript, design-system, react, uikit | ## Links - npm: https://www.npmjs.com/package/@commercetools-uikit/radio-input - Repository: https://github.com/commercetools/ui-kit - Homepage: https://uikit.commercetools.com - Issues: https://github.com/commercetools/ui-kit/issues - npm.io page: https://npm.io/package/@commercetools-uikit/radio-input ## Dependencies (13) - [react-is](https://npm.io/package/react-is.md) 19.2.6 - [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.20.13 - [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.10.5 - [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^11.10.5 - [@babel/runtime-corejs3](https://npm.io/package/@babel/runtime-corejs3.md) ^7.20.13 - [@commercetools-uikit/icons](https://npm.io/package/@commercetools-uikit/icons.md) ^20.6.7 - [@commercetools-uikit/utils](https://npm.io/package/@commercetools-uikit/utils.md) ^20.6.7 - [@commercetools-uikit/constraints](https://npm.io/package/@commercetools-uikit/constraints.md) ^20.6.7 - [@commercetools-uikit/input-utils](https://npm.io/package/@commercetools-uikit/input-utils.md) ^20.6.7 - [@commercetools-uikit/design-system](https://npm.io/package/@commercetools-uikit/design-system.md) ^20.6.7 - [@commercetools-uikit/spacings-inset](https://npm.io/package/@commercetools-uikit/spacings-inset.md) ^20.6.7 - [@commercetools-uikit/spacings-stack](https://npm.io/package/@commercetools-uikit/spacings-stack.md) ^20.6.7 - [@commercetools-uikit/spacings-inline](https://npm.io/package/@commercetools-uikit/spacings-inline.md) ^20.6.7 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 20.6.7 (latest) — 2026-07-17 - 0.0.0-canary-20260831181816 (canary) — 2026-08-31 - 0.0.0-FEC-938-ui-kit-post-pnpm-tooling-polish-catalogs-bundlewatch-bundlesize-20260518121756 (FEC-938-ui-kit-post-pnpm-tooling-polish-catalogs-bundlewatch-bundlesize) — 2026-05-18 - 0.0.0-migration-pnpm-20260513114959 (migration-pnpm) — 2026-05-13 - 0.0.0-CRAFT-2040-rich-text-input-destroys-hyperlink-tag-20260219190637 (CRAFT-2040-rich-text-input-destroys-hyperlink-tag) — 2026-02-19 - 0.0.0-fec-155-react-19-20250528075244 (fec-155-react-19) — 2025-05-28 - 0.0.0-FCT-1500-adjust-legacy-css-reset-20250527090339 (FCT-1500-adjust-legacy-css-reset) — 2025-05-27 - 0.0.0-SUPPORT-32352-de-ch-money-input-20250509174254 (SUPPORT-32352-de-ch-money-input) — 2025-05-09 - 0.0.0-main-20250115172531 (main) — 2025-01-15 - 0.0.0-preview-fec-155-react-19-20250113184401 (preview-fec-155-react-19) — 2025-01-13 - 0.0.0-preview-test-icon-entrypoints-20241212201418 (preview-test-icon-entrypoints) — 2024-12-12 - 0.0.0-preview-test-icon-pure-annotations-20241211181046 (preview-test-icon-pure-annotations) — 2024-12-11 - 0.0.0-preview-test-icon-bundle-20241210182318 (preview-test-icon-bundle) — 2024-12-10 - 0.0.0-preview-test-canary-preview-20241204111237 (preview-test-canary-preview) — 2024-12-04 - 0.0.0-preview-FCT-1187-20241024123200 (preview) — 2024-10-24 - … 1089 more at https://npm.io/package/@commercetools-uikit/radio-input/versions ## README # RadioInput ## Description A `RadioInput` represents a group of options where only one option can be selected at a time. The exported component contains a `RadioInput.Group` and `RadioInput.Option` components, with the `RadioInput.Group` component being the wrapped around the list of `RadioInput.Option`s. Most of the props should be assigned to the `RadioInput.Group` component, which internally forwards them to each `RadioInput.Option` component. This is mostly to avoid passing a lot of props to each `RadioInput.Option` component. ## Usage ```js import RadioInput from '@commercetools-uikit/radio-input';
🍎
Apple
🍌
Banana
🍍
Pineapple ``` ## Properties ### RadioInput.Group | Props | Type | Required | Values | Default | Description | | ---------------------- | --------------------- | :------: | ----------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `id` | `string` | - | - | - | Used as HTML `id` property for the radion `RadioInput.Group`. Each `RadioInput.Option` will also get an `id` with an index number appended, to make it unique | | `name` | `string` | - | - | - | Used as HTML `name` property for each `RadioInput.Option` | | `value` | `string` | ✅ | - | - | Value of the selected radio `RadioInput.Option` | | `onChange` | `func` | - | - | - | Called with the new value. Required when input is not read only. Parent should pass it back as `value` | | `onBlur` | `func` | - | - | - | Called when an `RadioInput.Option` is blurred | | `onFocus` | `func` | - | - | - | Called when an `RadioInput.Option` is focused | | `isDisabled` | `bool` | - | - | `false` | Indicates that all `RadioInput.Option`s cannot be used (e.g not authorised, or changes not saved) | | `isReadOnly` | `bool` | - | - | `false` | Indicates that all `RadioInput.Option`s are displaying read-only content | | `hasError` | `bool` | - | - | - | Indicates the radio `RadioInput.Option` has an error | | `hasWarning` | `bool` | - | - | - | Indicates the radio `RadioInput.Option` has a warning | | `horizontalConstraint` | `string` | - | `m` \| `l` \| `xl` \| `scale` | `scale` | Horizontal size limit of the radio `RadioInput.Group` (only available in `stack` direction) | | `direction` | `string` | - | `stack` \| `inline` | `stack` | Rendering direction of the radio `RadioInput.Option`s | | `directionProps` | `object` | - | - | `{ scale: "m" }` | Passes props of the `Spacings.Stack` or `Spacings.Inline`, dependeing on the chosen direction | | `children` | `node` | ✅ | - | - | At least one `RadioInput.Option` component or another node (mixed children are allowed) | | `value` | `string` \| `boolean` | - | - | - | The selected value of one of the `RadioInput.Option`s | ### RadioInput.Option | Props | Type | Required | Values | Default | Description | | -------------------- | --------------------- | :------: | ------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `value` | `string` \| `boolean` | ✅ | - | - | The value identifying this `RadioInput.Option` | | `children` | `node` | ✅ | - | - | Pass any react components to describe what the `RadioInput.Option` represents. NOTE that the children components are wrapped into a `Text.Body`, which applies a `secondary` tone in case the `RadioInput` is disabled. If you have a `Text` component within the children, make sure to apply the `secondary` tone to it in case of `isDisabled` state. | | `isDisabled` | `bool` | - | - | `false` | Radio `RadioInput.Option` automatically gets the `isDisabled` state passed to the `RadioInput.Group` component. Only in cases where you would need to force the `disabled` state of one of the `RadioInput.Option`s, you can pass this prop which will take precedence over the one passed to the `RadioInput.Group` component. | | `isHovered` | `bool` | - | - | `false` | Forces `RadioInput.Option` to be rendered in a hovered state. That's needed for cases when hovered appearance should be triggered by the parent component and not the `RadioInput.Option` itself. An `RadioInput.Option` is capable of handling it's own hovering without the need to pass this prop. | | `components.wrapper` | `function` | - | - | - | Pass a function that receives one argument and returns a react element. The function will be called by passing the `RadioInput.Option` as an argument and the resulting react element will be rendered. This can be used to add a controlled `ToolTip` around individual `RadioInput.Option`s. | | `additionalContent` | `node` | - | - | - | Pass any react component or a string to describe what the additional content on `RadioInput.Option` should represent. This is useful when radio option has additional children that need to be rendered as contents on the `RadioInput.Option`. | ## Invariants 1. The `RadioInput.Group` must have at least one `RadioInput.Option` element as `children` --- _Source: https://npm.io/package/@commercetools-uikit/radio-input · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._