Structure
OUDSRadioItem
Radio button item is a UI element that allows to select a single option from a set of mutually exclusive choices. Radio button item covers a wider range of contexts by allowing to toggle the visibility of additional text labels and icon assets.
- iOS 15.0+
- macOS 13.0+
- tvOS 16.0+
- visionOS 1.0+
- watchOS 11.0+
@MainActor struct OUDSRadioItem
Mentioned In
Layouts
The component can be rendered as two different layouts:
default: the component has a leading indicator, a label and optional texts, and an optional trailing decorative icon
reversed: like the default layout but with a trailing radio indicator and a leading optional decorative icon
Indicator states
The radio indicator has two available states:
selected: the radio is filled with a filled circle, the user has made the action to select the radio
unselected: the radio is empty, does not contain anything, the user has made the action to unselect or did not select yet the radio
Particular cases
An OUDSRadioItem can be related to an error situation, for example troubles for a formular. A dedicated look and feel is implemented for that if the isError flag is risen. In that case if the component displayed an icon, this icon will be replaced automatically by an error icon.
In addition, the OUDSRadioItem can be in read only mode, i.e. the user cannot interact with the component yet but this component must not be considered as disabled. The radio can be also outlined in some cases.
The component does not follow the right-to-left (RTL) / left-to-right (LTR) mode returned by the system as it could have some meaning to have for example the indicator in trailing position for LTR mode and vice versa. However, if the component has an icon in leading position (RTL mode) or in trailing position (LTR), the content of the icon is never changed. It could lead to a loss of meaning or semantics in the icon. Thus a specific flag can be used to flip the icon content whatever the layout direction is. It prevents the user do implement its own rules to flip or not image.
Rich text
Rich text can only be used for error messages.
Strong text can be used sparingly to highlight key information within the content. No other text styles should be used. Underlined text must not be applied manually (e.g. in error message), as it is commonly associated with hyperlinks and may mislead users.
Accessibility considerations
Always check the results of rich text mode with high contrast, light and dark modes, and Voice Over vocalization.
Voice Over will use several elements to describe the component: if component disabled / read only, if error context, the label and optional texts and a custom radio trait. No accessibility identifier is defined in OUDS side as this value remains in the users hands.
Forbidden by design
The design system does not allow to have both an error situation and a read only component. The design system does not allow to have both an error situation and a disabled component. The design system does not allow to have both a read only and a disabled component.
Code samples
The OUDSRadioItemcan be used outside a dedicated picker, thus it does not need any tag and associated type.
// Supposing we have an unselected state
@Published var selection: Bool = false
// A leading radio with a label.
// The default layout will be used here.
OUDSRadioItem("Lucy in the Sky with Diamonds", isOn: $selection)
// Localizable from bundle can also be used
OUDSRadioItem(LocalizedStringKey("option_label"), bundle: Bundle.module, isOn: $selection)
// A leading radio with a label, but in read only mode (user cannot interact yet, but not disabled).
// The default layout will be used here.
OUDSRadioItem("Lucy in the Sky with Diamonds", isOn: $selection, isReadOnly: true)
// A leading radio with a label, and an additional label but without text.
// The default layout will be used here.
OUDSRadioItem("Lucy in the Sky with Diamonds", isOn: $selection, extraLabel: "The Beatles")
// A leading radio with an additional label.
// The default layout will be used here.
OUDSRadioItem("Lucy in the Sky with Diamonds", isOn: $selection, extraLabel: "The Beatles", description: "1967")
// A trailing radio with a label, a description, an icon, a divider and is about an error.
// The reversed layout will be used here.
OUDSRadioItem("Rescue from this world!",
isOn: $selection,
description: "Put your hand in mine",
icon: Image(decorative: "ic_heart"),
isReversed: true,
isError: true,
hasDivider: true)
// If on error, add an error message can help user to understand error context
OUDSRadioItem("Rescue from this world!",
isOn: $selection,
isError: true,
errorText: "Something wrong",
hasDivider: true)
// A leading radio with a label, but disabled.
// The default layout will be used here.
OUDSRadioItem("Rescue from this world!", isOn: $selection)
.disabled(true)
// Never disable a read only or an error-related radio as it will crash
// This is forbidden by design!
OUDSRadioItem("Kaboom!", isOn: $selection, isError: true).disabled(true) // fatal error
OUDSRadioItem("Kaboom!", isOn: $selection, isReadOnly: true).disabled(true) // fatal error
If you need to flip your icon depending to the layout direction or not (e.g. if RTL mode lose semantics / meanings):
@Environment(\.layoutDirection) var layoutDirection
OUDSRadioItem("Cocorico !",
isOn: $selection,
icon: Image(systemName: "figure.handball"),
flipIcon: layoutDirection == .rightToLeft,
isInversed: layoutDirection == .rightToLeft)
Design documentation
unified-design-system.orange.com
Themes rendering
Orange
Orange Compact
Sosh
Wireframe
Version
1.4.0 (Figma component design version)
Since
0.12.0
Topics
Initializers
init(String, isOn: Binding<Bool>, extraLabel: String?, description: String?, icon: Image?, flipIcon: Bool, isOutlined: Bool, isReversed: Bool, isError: Bool, errorText: String?, isReadOnly: Bool, hasDivider: Bool, constrainedMaxWidth: Bool, action: (() -> Void)?)Creates a radio with label and optional helper text as description, icon, divider. Supposed to be integrated inside a OUDSRadioPicker.
init(String, isOn: Binding<Bool>, extraLabel: String?, description: String?, icon: Image?, flipIcon: Bool, isOutlined: Bool, isReversed: Bool, isError: Bool, errorText: AttributedString, isReadOnly: Bool, hasDivider: Bool, constrainedMaxWidth: Bool, action: (() -> Void)?)Creates a radio with label and optional helper text as description, icon, divider.
init(LocalizedStringKey, tableName: String?, bundle: Bundle, isOn: Binding<Bool>, extraLabel: String?, description: String?, icon: Image?, flipIcon: Bool, isOutlined: Bool, isReversed: Bool, isError: Bool, errorText: String?, isReadOnly: Bool, hasDivider: Bool, constrainedMaxWidth: Bool, action: (() -> Void)?)Creates a radio with a localized label, looking up the key in the given bundle.
init(LocalizedStringKey, tableName: String?, bundle: Bundle, isOn: Binding<Bool>, extraLabel: String?, description: String?, icon: Image?, flipIcon: Bool, isOutlined: Bool, isReversed: Bool, isError: Bool, errorText: AttributedString, isReadOnly: Bool, hasDivider: Bool, constrainedMaxWidth: Bool, action: (() -> Void)?)Creates a radio with a localized label, looking up the key in the given bundle.
Instance Properties