Name	Description	Default
propertyName*	This is a short description summary	defaultValue
propertyName*	This is a short description summary	defaultValue
propertyName*	This is a short description summary	defaultValue

RadioGroup

A radio group is a set of checkable buttons, known as radio buttons, where no more than one of the buttons can be checked at a time.

usage: import { RadioGroup, Radio } from "@sharegate/orbit-ui";
wai-aria: https://www.w3.org/WAI/ARIA/apg/patterns/radiobutton
sources: Github

Usage

Default

A default radio group.

MarsJupiterPluto

Editable example

<RadioGroup>
    <Radio value="mars">Mars</Radio>
    <Radio value="jupiter">Jupiter</Radio>
    <Radio value="pluto">Pluto</Radio>
</RadioGroup><RadioGroup>
    <Radio value="mars">Mars</Radio>
    <Radio value="jupiter">Jupiter</Radio>
    <Radio value="pluto">Pluto</Radio>
</RadioGroup>

Selected value

A radio group can have a selected value.

MarsJupiterPluto

Editable example

<RadioGroup defaultValue="jupiter">
    <Radio value="mars">Mars</Radio>
    <Radio value="jupiter">Jupiter</Radio>
    <Radio value="pluto">Pluto</Radio>
</RadioGroup><RadioGroup defaultValue="jupiter">
    <Radio value="mars">Mars</Radio>
    <Radio value="jupiter">Jupiter</Radio>
    <Radio value="pluto">Pluto</Radio>
</RadioGroup>

Disabled

A single radio can be disabled.

MarsJupiterPluto

Editable example

<RadioGroup>
    <Radio disabled value="mars">
        Mars
    </Radio>
    <Radio value="jupiter">Jupiter</Radio>
    <Radio value="pluto">Pluto</Radio>
</RadioGroup><RadioGroup>
    <Radio disabled value="mars">
        Mars
    </Radio>
    <Radio value="jupiter">Jupiter</Radio>
    <Radio value="pluto">Pluto</Radio>
</RadioGroup>

Or the whole group.

MarsJupiterPluto

Editable example

<RadioGroup disabled>
    <Radio value="mars">Mars</Radio>
    <Radio value="jupiter">Jupiter</Radio>
    <Radio value="pluto">Pluto</Radio>
</RadioGroup><RadioGroup disabled>
    <Radio value="mars">Mars</Radio>
    <Radio value="jupiter">Jupiter</Radio>
    <Radio value="pluto">Pluto</Radio>
</RadioGroup>

Icon

A radio can have icons after his text.

MarsJupiterPluto

Editable example

<RadioGroup>
    <Radio value="mars">
        <Text>Mars</Text>
        <PlaceholderMajorIcon />
    </Radio>
    <Radio value="jupiter">Jupiter</Radio>
    <Radio value="pluto">Pluto</Radio>
</RadioGroup><RadioGroup>
    <Radio value="mars">
        <Text>Mars</Text>
        <PlaceholderMajorIcon />
    </Radio>
    <Radio value="jupiter">Jupiter</Radio>
    <Radio value="pluto">Pluto</Radio>
</RadioGroup>

Counter

A radio can have a counter after his text.

Mars6JupiterPluto6

Editable example

<RadioGroup>
    <Radio value="mars">
        <Text>Mars</Text>
        <Counter>6</Counter>
    </Radio>
    <Radio value="jupiter">Jupiter</Radio>
    <Radio value="pluto">
        <Text>Pluto</Text>
        <Counter>6</Counter>
    </Radio>
</RadioGroup><RadioGroup>
    <Radio value="mars">
        <Text>Mars</Text>
        <Counter>6</Counter>
    </Radio>
    <Radio value="jupiter">Jupiter</Radio>
    <Radio value="pluto">
        <Text>Pluto</Text>
        <Counter>6</Counter>
    </Radio>
</RadioGroup>

Reverse

A radio button can be to the left or to the right of his label.

Mars6

Editable example

<Radio reverse value="mars">
    <Text>Mars</Text>
    <PlaceholderMajorIcon />
    <Counter>6</Counter>
</Radio><Radio reverse value="mars">
    <Text>Mars</Text>
    <PlaceholderMajorIcon />
    <Counter>6</Counter>
</Radio>

Or the whole group.

Mars6JupiterPluto6

Editable example

<RadioGroup reverse>
    <Radio value="mars">
        <Text>Mars</Text>
        <PlaceholderMajorIcon />
        <Counter>6</Counter>
    </Radio>
    <Radio value="jupiter">Jupiter</Radio>
    <Radio value="pluto">
        <Text>Pluto</Text>
        <Counter variant="divider">6</Counter>
    </Radio>
</RadioGroup><RadioGroup reverse>
    <Radio value="mars">
        <Text>Mars</Text>
        <PlaceholderMajorIcon />
        <Counter>6</Counter>
    </Radio>
    <Radio value="jupiter">Jupiter</Radio>
    <Radio value="pluto">
        <Text>Pluto</Text>
        <Counter variant="divider">6</Counter>
    </Radio>
</RadioGroup>

Orientation

A radio group can render his elements horizontally.

MarsJupiterPluto

Editable example

<RadioGroup orientation="horizontal">
    <Radio value="mars">Mars</Radio>
    <Radio value="jupiter">Jupiter</Radio>
    <Radio value="pluto">Pluto</Radio>
</RadioGroup><RadioGroup orientation="horizontal">
    <Radio value="mars">Mars</Radio>
    <Radio value="jupiter">Jupiter</Radio>
    <Radio value="pluto">Pluto</Radio>
</RadioGroup>

Validation

A radio group can display a validation state to communicate to the user whether the current value is valid or invalid. Implement your own validation logic in your app and pass either "valid" or "invalid" to the input via the validationState prop.

The example below illustrates how one would validate if a specific value of the radio group has been selected.

MarsJupiterPluto

Editable example

() => {
    const [value, setValue] = useState(null);

    const isValid = value === "pluto";

    const handleChange = useCallback(
        (event, newValue) => {
            setValue(newValue);
            console.log(newValue);
        },
        [setValue]
    );

    return (
        <RadioGroup
            validationState={isValid ? "valid" : "invalid"}
            value={value}
            onChange={handleChange}
        >
            <Radio value="mars">Mars</Radio>
            <Radio value="jupiter">Jupiter</Radio>
            <Radio value="pluto">Pluto</Radio>
        </RadioGroup>
    );
};() => {
    const [value, setValue] = useState(null);

    const isValid = value === "pluto";

    const handleChange = useCallback(
        (event, newValue) => {
            setValue(newValue);
            console.log(newValue);
        },
        [setValue]
    );

    return (
        <RadioGroup
            validationState={isValid ? "valid" : "invalid"}
            value={value}
            onChange={handleChange}
        >
            <Radio value="mars">Mars</Radio>
            <Radio value="jupiter">Jupiter</Radio>
            <Radio value="pluto">Pluto</Radio>
        </RadioGroup>
    );
};

Custom components

Any component implementing the CheckableContext can behave like a radio group. This is usually done by using the useCheckableProps hook.

Editable example

const TagButton = as(Tag, "button");

function CustomComponent({ value, children, ...rest }) {
    const [{ checked: isChecked, onCheck, ...checkableProps }] = useCheckableProps({ value });

    const handleCheck = useCallback(
        event => {
            onCheck(event, value);
        },
        [value, onCheck]
    );

    return (
        <TagButton
            {...rest}
            {...checkableProps}
            value={value}
            onClick={handleCheck}
            color={isChecked ? "white" : undefined}
            backgroundColor={isChecked ? "alias-accent" : "alias-warning-light"}
            aria-checked={isChecked}
        >
            {children}
        </TagButton>
    );
}

render(() => {
    return (
        <RadioGroup gap={2} orientation="horizontal">
            <CustomComponent value="mars">Mars</CustomComponent>
            <CustomComponent value="jupiter">Jupiter</CustomComponent>
            <CustomComponent value="pluton">Pluton</CustomComponent>
        </RadioGroup>
    );
});const TagButton = as(Tag, "button");

function CustomComponent({ value, children, ...rest }) {
    const [{ checked: isChecked, onCheck, ...checkableProps }] = useCheckableProps({ value });

    const handleCheck = useCallback(
        event => {
            onCheck(event, value);
        },
        [value, onCheck]
    );

    return (
        <TagButton
            {...rest}
            {...checkableProps}
            value={value}
            onClick={handleCheck}
            color={isChecked ? "white" : undefined}
            backgroundColor={isChecked ? "alias-accent" : "alias-warning-light"}
            aria-checked={isChecked}
        >
            {children}
        </TagButton>
    );
}

render(() => {
    return (
        <RadioGroup gap={2} orientation="horizontal">
            <CustomComponent value="mars">Mars</CustomComponent>
            <CustomComponent value="jupiter">Jupiter</CustomComponent>
            <CustomComponent value="pluton">Pluton</CustomComponent>
        </RadioGroup>
    );
});

Controlled

A radio group can handle value state in controlled mode.

MarsJupiterPluto

Editable example

() => {
    const [value, setValue] = useState(null);

    const handleChange = useCallback(
        (event, newValue) => {
            setValue(newValue);
            console.log(newValue);
        },
        [setValue]
    );

    return (
        <RadioGroup value={value} onChange={handleChange}>
            <Radio value="mars">Mars</Radio>
            <Radio value="jupiter">Jupiter</Radio>
            <Radio value="pluto">Pluto</Radio>
        </RadioGroup>
    );
};() => {
    const [value, setValue] = useState(null);

    const handleChange = useCallback(
        (event, newValue) => {
            setValue(newValue);
            console.log(newValue);
        },
        [setValue]
    );

    return (
        <RadioGroup value={value} onChange={handleChange}>
            <Radio value="mars">Mars</Radio>
            <Radio value="jupiter">Jupiter</Radio>
            <Radio value="pluto">Pluto</Radio>
        </RadioGroup>
    );
};

API

RadioGroup

usage: import { RadioGroup } from "@sharegate/orbit-ui";
extends: Div
StyleProps

Name Description Default

align

The alignment of the elements.

"center" | "end" | "start" | ResponsiveValue<FlexAlignment>

autoFocus

Whether or not the first input of the group should autoFocus on render.

numberfalsetrue

disabled

Whether or not the inputs of the group are disabled.

falsetrue

fluid

Whether the elements take up the width & height of their container.

false | true | ResponsiveValue<boolean>

inline

Whether or not the element generate line breaks before or after himself.

falsetrue

name

Radio group name.

string

onChange

Called when an input of the group change.

(event: SyntheticEvent<Element, Event>, value: string) => void

`event`	React's original event.
`value`	The new value.

orientation

The orientation of the elements.

"horizontal" | "vertical" | ResponsiveValue<FlexOrientation>

required

Whether a user input is required before form submission.

falsetrue

reverse

Whether or not to reverse the order of the elements.

falsetrue

validationState

Whether the group should display as "valid" or "invalid".

"valid""invalid"

value

The value of the group.

string

wrap

Whether elements are forced onto one line or can wrap onto multiple rows.

false | true | ResponsiveValue<boolean>

Radio

usage: import { Radio } from "@sharegate/orbit-ui";
slots: "label", "icon", "counter"
extends: Label
StyleProps

Name Description Default

autoFocus

Whether or not the input should autoFocus on render.

numberfalsetrue

checked

A controlled checked state value.

falsetrue

children*

React children.

defaultChecked

The initial value of checked when uncontrolled.

falsetrue

onChange

Called when the radio checked state change.

ChangeEventHandler<Element>

event React's original synthetic event.

onValueChange

Called when the radio checked state change.

(event: ChangeEvent<HTMLInputElement>, isChecked: boolean) => void

`event`	React's original synthetic event.
`isChecked`	Whether or not the radio is checked.

required

Whether or not a user input is required before form submission.

falsetrue

reverse

Invert the order of the checkmark box and the label.

falsetrue

validationState

Whether or not the input should display as "valid" or "invalid".

"valid""invalid"

value

The value to associate with when in a group.

string

No Preview

RadioGroup

Usage

Default

Selected value

Disabled

Icon

Counter

Reverse

Orientation

Validation

Custom components

Controlled

API

RadioGroup

Radio