Skip to main content

Purpose

MNRadioButtons renders a group of radio buttons with a main label. Each option can be selected exclusively. The component supports a horizontal (row) or vertical (column) layout and can be disabled for editing, which visually and functionally disables interaction.

Import​

import MNRadioButtons from '@/components/ui/forms/radioes/MNRadioButtons';

Props​

PropTypeRequiredDefaultDescription
labelstringYes-The main label shown above the radio button group
optionsstring[]Yes-Array of options to render as radio buttons
selectedValuestringYes-The currently selected option value
onChange(value: string) => voidYes-Callback fired when user selects a different option
direction'row' | 'column'No'row'Layout direction of radio buttons: horizontal (row) or vertical (column)
editablebooleanNotrueWhether the radio buttons are interactive or disabled

Usage Example​

<MNRadioButtons
    label={'This radio button is disabled'}
    options={['Apple', 'Banana', 'Orange', 'Mango']}
    onChange={(value) => {
        setRadioButtonValue(value);
        debug(value, 'Radio checkboxe checked.');
    }}
    direction={'row'}
    selectedValue={'Orange'}
    editable={false}
/>

NOTE: All example can be founded in radio_buttons.tsx