OUDSRadioPicker

A picker allowing to expose several radio buttons and choose only one within the others. Each radio button contains a “tag”, i.e. a supposed to be unique value. The picker will expose the choosen value through this “tag”. It has also some configuration elements which will override the one applied to nested OUDSRadioItem (divider, read only and error mode, layout and outlined)

iOS 15.0+
macOS 13.0+
visionOS 1.0+

@MainActor struct OUDSRadioPicker<Tag> where Tag : Hashable

Mentioned In

Controls

Accessibility considerations

Voice Over will use several elements to describe the component: if component disabled / read only, if error context, the label and helper texts and a custom radio trait. The picker itself does no have any defined accessiiblity value, label or identifier ; it remains in the users hands to define which one will be used. However if defined in the OUDSRadioPickerData the items inside the picker will have such accessibility identifiers.

Forbidden by design

The design system does not allow to have OUDSRadioItem in both an error situation and a read only state. The design system does not allow to have OUDSRadioItem in both an error situation and a disabled state. The design system does not allow to have OUDSRadioItem in both a read only and a disabled state.

Code samples

    // Define the elements to display in radio buttons using OUDSRadioPickerData.
    // This object has the same properties as the OUDSRadioItem,
    // and some of them are optional withdefault values set
    var someDataToPopulate: [OUDSRadioPickerData<String>] {
        [
            OUDSRadioPickerData<String>(tag: "Choice_1",
                                        label: "Virgin Holy Lava",
                                        extraLabel: "Very spicy",
                                        description: "No alcohol, only tasty flavors",
                                        icon: Image(systemName: "flame")),

            OUDSRadioPickerData<String>(tag: "Choice_2",
                                        label: "IPA beer",
                                        description: "From Brewdog company",
                                        icon: Image(systemName: "dog.fill")),

            OUDSRadioPickerData<String>(tag: "Choice_3",
                                        label: "Mineral water",
                                        icon: Image(systemName: "waterbottle.fill")),
        ]
    }

    // Prepare the selection, with a value previously selected
    // Use the data and the binding for the picker.
    @State var selection: String = "Choice_1"

    // Here the picker is vertical
    OUDSRadioPicker(selection: $selection, radios: someDataToPopulate)

    // The picker can apply some settings to all its radio buttons.
    // It can be also horitzontal with a scroll indicator.
    // Here all the the radio buttons are in read only mode and use reversed layout.
    OUDSRadioPicker(selection: $selection,
                    radios: someDataToPopulate,
                    isReversed: true,
                    isReadOnly: true,
                    placement: .horitzontal(true))

Design documentation

There is no online specification as this component is not an official OUDS one

Theme rendering

Orange

A radio picker component in light and dark modes with Orange theme

Orange Compact

A radio picker component in light and dark modes with Orange Compact theme

Sosh

A radio picker component in light and dark modes with Sosh theme

Wireframe

A radio picker component in light and dark modes with Wirefraùe theme

Since
0.14.0

Topics

Initializers

init(selection: Binding<Tag>, radios: [OUDSRadioPickerData<Tag>], placement: OUDSRadioPickerPlacement, isOutlined: Bool, isReversed: Bool, isError: Bool, isReadOnly: Bool, hasDivider: Bool, itemsSpacing: SpaceSemanticToken?)
Defines the picker view which displays using OUDSRadioItem view the OUDSRadioPickerData

Instance Properties

var body: some View