Skip to main content
Give us your valuable feedback

It will help us understand how we can serve you better

Give feedback

Components

Radio Button

Buttons are used to select only one of a limited number of choices

banner-Radio Button
Component Status Details

Status component contains a list of checks and completeness that has been tested and owned by each component

check-list-icon We don't use color as the only visual tool to convey information.
check-list-icon The component’s structure and properties include relevant options such as variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.check-list-icon The title is the component name that uses the frame base component template.check-list-icon The base component name contains: .Base & "Component Name" if there is more than one.check-list-icon All component properties use the Legion foundation.
check-list-icon We can change all the parts that are connected to the component base.check-list-icon The inside of the base component remains connected to the master component.check-list-icon All variant options are not damaged when we change from one to another.check-list-icon Overriding changes to components will not reset other variants.
check-list-icon Component's already has component specs documentation.

Status

Resources

Usage

Buttons are used to select only one of a limited number of choices

Use Legion radio button that typically rendered as small circles, which are filled or highlighted when selected

    import LegionUI

Variant

Legion Have 2 Variant of Radio Button :

Checked ON
Checked OFF

Use this Function : LGNRadioBtnand add value id and function .setChecked(true) for Checked ON or .setChecked(false) for Checked OFF

This code sample demonstrates how to modify the type of radio button :

A. Checked ON

LGNRadioBtn(
            id: "default",
            callback: { selectedId in
                // do something with selectedId
            }
        )
        .setChecked(true)

B. Checked OFF

LGNRadioBtn(
            id: "default",
            callback: { selectedId in
                // do something with selectedId
            }
        )
        .setChecked(false)

Attribute

Legion Have 3 Attributes for Customize Radio Button :

Size

This size radio button attribute for user to choose size radio button.

Use this Function : .variant(size: SizeBtn), where the SizeBtnconsists of small and default and finish with .setChecked(true)for Checked ON and .setChecked(false) for Checked OFF

This code sample demonstrates how to modify size radio button :

A. Radio Button Small & Checked ON

LGNRadioBtn(
            id: "small",
            callback: { selectedId in
                // do something with selectedId
            }
        )
        .variant(size: .small)
        .setChecked(true)

B. Radio Button Small & Checked OFF

LGNRadioBtn(
            id: "small",
            callback: { selectedId in
                // do something with selectedId
            }
        )
        .variant(size: .small)
        .setChecked(false)

C. Radio Button Default & Checked ON

LGNRadioBtn(
            id: "default",
            callback: { selectedId in
                // do something with selectedId
            }
        )
        .variant(size: .default)
        .setChecked(true)

D. Radio Button Default & Checked OFF

LGNRadioBtn(
            id: "default",
            callback: { selectedId in
                // do something with selectedId
            }
        )
        .variant(size: .default)
        .setChecked(false)

Disable

This disable for mark the radio button that now have a value true

Use this Function : .variant(size: SizeBtn), where the SizeBtnconsists of small and default . Add this .setChecked(true)for Checked ON and .setChecked(false) for Checked OFF. Last finish with .disableInteraction(true)

This code sample demonstrates how to modify disable radio button :

A. Radio Button Small Disabled & Checked ON

LGNRadioBtn(
            id: "small",
            callback: { selectedId in
                // do something with selectedId
            }
        )
        .variant(size: .small)
        .setChecked(true)
        .disableInteraction(true)

B. Radio Button Small Disabled & Checked OFF

LGNRadioBtn(
            id: "small",
            callback: { selectedId in
                // do something with selectedId
            }
        )
        .variant(size: .small)
        .setChecked(false)
        .disableInteraction(true)

C. Radio Button Default Disabled & Checked ON

LGNRadioBtn(
            id: "default",
            callback: { selectedId in
                // do something with selectedId
            }
        )
        .variant(size: .default)
        .setChecked(true)
        .disableInteraction(true)

D. Radio Button Default Disabled & Checked OFF

LGNRadioBtn(
            id: "default",
            callback: { selectedId in
                // do something with selectedId
            }
        )
        .variant(size: .default)
        .setChecked(false)
        .disableInteraction(true)

Label

Choose type radio button : .variant(size: SizeBtn), where the SizeBtnconsists of smalland default And Add this label: "ValueOfLabel"

This code sample demonstrates how to modify label of the button :

A. Size Small , Disable ON & Checked ON

LGNRadioBtn(
    id: "small",
    label: "Small",
    callback: { selectedId in
        // do something with selectedId
    }
)
.variant(size: .small)
.disableInteraction(true)

B. Size Default , Disable ON & Checked ON

LGNRadioBtn(
    id: "default",
    label: "Default",
    callback: { selectedId in
        // do something with selectedId
    }
)
.variant(size: .default)
.disableInteraction(true)

C. Size Small, Disable ON & Checked OFF

LGNRadioBtn(
    id: "small",
    label: "Small",
    callback: { selectedId in
        // do something with selectedId
    }
)
.variant(size: .small)
.disableInteraction(true)

D. Size Default, Disable ON & Checked OFF

LGNRadioBtn(
    id: "default",
    label: "Default",
    callback: { selectedId in
        // do something with selectedId
    }
)
.variant(size: .default)
.disableInteraction(true)

E. Size Small, Disable OFF & Checked ON

LGNRadioBtn(
    id: "small",
    label: "Small",
    callback: { selectedId in
        // do something with selectedId
    }
)
.variant(size: .small)
.disableInteraction(false)

F. Size Default, Disable OFF & Checked ON

LGNRadioBtn(
    id: "default",
    label: "Default",
    callback: { selectedId in
        // do something with selectedId
    }
)
.variant(size: .default)
.disableInteraction(false)

G. Size Small. Disable OFF & Checked OFF

LGNRadioBtn(
    id: "small",
    label: "Small",
    callback: { selectedId in
        // do something with selectedId
    }
)
.variant(size: .small)
.disableInteraction(false)

H. Size Default, Disable OFF & Checked OFF

LGNRadioBtn(
    id: "default",
    label: "Default",
    callback: { selectedId in
        // do something with selectedId
    }
)
.variant(size: .default)
.disableInteraction(false)

Properties

PropertiesDescriptionDefault Value
idThe identifier of the radio button.not have
labelThe label for the radio button’s that describes itnil
fontFamilyA string of font family name""
textForegroundColorA color to be used for the text label on the right, when the view is not disabledColor.LGNTheme.tertiary800
textDisabledColorA color to be used for the text label on the right, when the view is disabledColor.LGNTheme.tertiary500
isCheckedThe boolean state to check the current state of the radio buttonfalse
callbackThe callback is to perform for radio button action and to return what is the id that has been selected. for example, you can add the logic to change checked radio button in the callback based on the id in the returnnil

Example Project

LGNRadioBtn(
        id: "male",
        label: "Male",
        fontFamily: "Verdana-Italic",
        textForegroundColor: .green,
        textDisabledColor: .red,
        isChecked: false,
        callback: { selectedId in
            // do something with selectedId