# Radio Button > Source: https://design.nanatec.co.ke/components/radio-button/ > A button-styled radio option — interchangeable with `nana-radio` inside a `nana-radio-group`. Inside a horizontal group the buttons read as a segmented control. The group owns selection, keyboard roving and form association; on its own one still renders, selects and fires `nana-change`. A button-styled radio option — interchangeable with `nana-radio` inside a [`nana-radio-group`](/components/radio-group/). Inside a horizontal group the buttons read as a segmented control. The group owns selection, keyboard roving and form association; on its own one still renders, selects and fires `nana-change`. ## Preview ```html Monthly Yearly Lifetime ``` ## Installation ```bash npm install @nana-tec/ui-components ``` ## Import ```js import "@nana-tec/ui-components/radio-button"; ``` Already registered if you imported `@nana-tec/ui-components/radio-group`. ## Basic usage ```html Monthly Yearly ``` ## The segmented control `orientation="horizontal"` on the **group** is what makes a row of these read as one segmented control. In a vertical group they stay as separate stacked buttons — useful when the options are long, or when each needs its own description. ```html First option Second option First Second ``` ## Mixing flavours `nana-radio` and `nana-radio-button` are interchangeable children of the same group, so a form can use a circle where it needs a description and a button where it does not. ```html Standard ``` ## Size `size` is `sm`, `md` (default) or `lg`. Set it on the group to size every child at once, or on a single option to override it. ```html Small Small Large Large ``` ## Prefix icons The `prefix` slot takes a leading icon — a [`nana-icon`](/components/icon/), or anything else. ```html List Grid Board ``` ## Checked, disabled and invalid Outside a group, drive `checked` yourself. Inside one, the group sets it from `value` — write `checked` and the group will overwrite it on the next render, so leave it to the group there. ```html Selected Unavailable ``` `invalid` is a styling hook the group sets when its `error` is non-empty; it paints the border in the danger colour. Set it directly only outside a group. ## Keyboard | Key | Does | | --- | --- | | `Space` `Enter` | Select this option | | `↓` `→` `↑` `←` | Move and select — handled by the group | Inside a group, the group's roving tabindex decides which option is tabbable and the arrows do the moving, so this element only answers the activation keys. The host delegates focus to its inner `