Components

Radio Button

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

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

Properties	Description	Default Value
id	The identifier of the radio button.	not have
label	The label for the radio button’s that describes it	`nil`
fontFamily	A string of font family name	`""`
textForegroundColor	A color to be used for the text label on the right, when the view is not disabled	`Color.LGNTheme.tertiary800`
textDisabledColor	A color to be used for the text label on the right, when the view is disabled	`Color.LGNTheme.tertiary500`
isChecked	The boolean state to check the current state of the radio button	`false`
callback	The 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 return	`nil`

Example Project

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

Do you have feedback?

Please let us know to make it better

Send Feedback