Radio Button

Radio buttons are used when the user needs to select one option from a set.

This UI component is best used when there is enough space, since all the options are visible at once. If you need to save space, a better UI choice would be the Dropdown, which only shows the selected item and the others are hidden after the selection.

Basic Usage

The following example will render a simple Radio button with a label.

<Radio value="1" name="myRadio" label="One" />

Radio buttons can be used individually or can be grouped logically inside a Radio Group component. The Radio Group component, also helps to specify the group name only once, otherwise it needs to be added to every radio button.

<RadioGroup name="gender">
    <Radio value="f" label="Female" />
    <Radio value="m" label="Male" />
    <Radio value="o" label="Other" />
</RadioGroup>

Value binding

Controlled component

Radio buttons can be used as controlled components by providing the checked and the onChange props.

function App() {
    const [gender, setGender] = React.useState('f');
    const genderChange = (ev) => {
        setGender(ev.target.value);
    }

    return <RadioGroup name="genderGroup">
        <Radio value="f" checked={gender === 'f'} onChange={genderChange} label="Female" />
        <Radio value="m" checked={gender === 'm'} onChange={genderChange} label="Male" />
        <Radio value="o" checked={gender === 'o'} onChange={genderChange} label="Other" />
    </RadioGroup>
}

Uncontrolled component

When using the Radio as uncontrolled component, a ref can be used to access the component instance. The checked property on the component will be true, when the radio is selected.

function App() {
    const ref = React.useRef(null);
    const checkOutTheRadio = () => {
        console.log(ref.current.checked); // should print out the checked state of the radio to the console
    };

    return <RadioGroup name="uncontrolled">
        <Radio value="one" defaultChecked={true} ref={oneRef} label="One or the" />
        <Radio value="other" label="Other" />
        <Button onClick={checkOutTheRadio}>Which one is selected?</Button>
    </RadioGroup>
}

For many more examples - simple and complex use-cases - check out the radio button demos for react.

Options

const handler = (ev) => { setState({ myValue: ev.target.value }); }
<Radio onChange={handler} checked={state.myValue === 'value1'} />

Customizing the appearance

While the provided pre-built themes are enough in many use cases, most of the times on top of adapting to a specific platform, you'd also like to match a brand or color scheme. Mobiscroll provides various ways to achieve this:

• Create custom themes using the theme builder - the custom themes can be also built using out theme builder, on a graphical user interface, without any coding, or the need for Sass support in your project.
• Create custom themes using Sass - use this, if you need multiple themes with different color variatons, in case you have pages with different colors, or you'd like to users to customize the colors of your app.
• Override the Sass color variables - the straightforward way to change the colors in one place throughout the application.

Override the Sass Color Variables

A convenient way to customize the colors of the Mobiscroll components is to override the Sass color variables.

Let's say your branding uses a nice red accent color, and you'd like that color to appear on the Mobiscroll components as well, while still using platform specific themes (e.g. ios on iOS devices, material on Android devices, and mobiscroll on desktop). You can override the accent color for every theme:

$mbsc-ios-accent: #e61d2a;
$mbsc-material-accent: #e61d2a;
$mbsc-mobiscroll-accent: #e61d2a;

@import "~@mobiscroll/React/dist/css/mobiscroll.react.scss"

You can also customize the colors on many levels:

1. Theme specific variables (ex. $mbsc-material-background, $mbsc-ios-dark-text) are applied to all components in a theme. Complete list of variables here.
2. Component specific global variables (ex. $mbsc-card-background-light, $mbsc-listview-text-dark) are applied to all themes for a specific component.
3. Component and theme specific variables (ex. $mbsc-ios-dark-form-background, $mbsc-material-input-text) are applied to a specific theme and a specific component.

For many more examples - simple and complex use-cases - check out the radio button demos for react.