Skip to main content Home Creators orange-opensource ouds-ios ouds-ios-components-controls
ouds-ios-components-controls Usage and code examples for OUDS iOS Controls components — OUDSCheckbox / OUDSCheckboxItem / OUDSCheckboxPicker / OUDSCheckboxIndeterminate, OUDSRadio / OUDSRadioItem / OUDSRadioPicker, OUDSSwitch / OUDSSwitchItem, OUDSSuggestionChip / OUDSFilterChip / OUDSChipPicker, OUDSPinCodeInput, OUDSPasswordInput, OUDSTextInput, OUDSTextArea. Load the ouds-ios-framework-usage skill first for imports, themes and image rules.
Jump to install Skills Marketplace Discover and explore AI skills built by the community.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Show prompt details A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/Orange-OpenSource/ouds-ios --skill ouds-ios-components-controlsThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Download Zip Downloading... More from this repository
Setup and general usage of the OUDS iOS framework — imports, themes, token namespaces, view modifiers, image rules, shared control patterns and custom font registration. Load this first; then load the matching `ouds-ios-components-*` skill for a specific component family (actions, content-display, controls, dialogs, foundations, indicators, layouts, navigations).
Related occupations SOC
Based on SOC occupation classification
name ouds-ios-components-controls description Usage and code examples for OUDS iOS Controls components — OUDSCheckbox / OUDSCheckboxItem / OUDSCheckboxPicker / OUDSCheckboxIndeterminate, OUDSRadio / OUDSRadioItem / OUDSRadioPicker, OUDSSwitch / OUDSSwitchItem, OUDSSuggestionChip / OUDSFilterChip / OUDSChipPicker, OUDSPinCodeInput, OUDSPasswordInput, OUDSTextInput, OUDSTextArea. Load the ouds-ios-framework-usage skill first for imports, themes and image rules. license MIT
OUDS Controls components
Prerequisite: load ouds-ios-framework-usage first for imports, themes and image rules
(OUDSImage, // swiftlint:disable:next accessibility_label_for_image).
Common patterns (shared across most Controls)
These patterns apply to Checkbox, Radio, Switch, TextInput, TextArea, PinCodeInput, PasswordInput unless noted otherwise.
Pattern Syntax Error state isError: true, errorText: "Message"Rich error errorText: AttributedStringPlain helper helperText: "…"Rich helper helperText: AttributedStringError status (inputs) status: .error(message: "…")Rich error status status: .richError(message: AttributedString)
Disabled .disabled(true) — never combine with isError or isReadOnly
Forbidden combinations (fatal error at runtime): isError + isReadOnly, isError + .disabled, isReadOnly + .disabled
Checkbox OUDSCheckbox (isOn: $isOn , accessibilityLabel: "Label" )
OUDSCheckboxIndeterminate (selection: $selection , accessibilityLabel: "Label" )
OUDSCheckboxItem ("Label" , isOn: $isOn )
OUDSCheckboxItem ("Label" , isOn: $isOn , description: "Helper" ,
icon: OUDSImage (asset: Image (decorative: "ic" )))
OUDSCheckboxItem ("Label" , isOn: $isOn ,
icon: OUDSImage (asset: Image (decorative: "ic" )), isReversed: true )
OUDSCheckboxItem ("Label" , isOn: $isOn ,
icon: OUDSImage (asset: Image (decorative: "il_brand" ), renderingMode: .original))
OUDSCheckboxItem ("Label" , isOn: $isOn ,
icon: OUDSImage (asset: Image (systemName: "figure.handball" ),
flipped: layoutDirection == .rightToLeft))
OUDSCheckboxItem (LocalizedStringKey ("agree_terms" ), bundle: Bundle .module, isOn: $isOn ,
icon: OUDSImage (asset: Image (decorative: "ic" )))
OUDSCheckboxItemIndeterminate ("Label" , selection: $selection ,
icon: OUDSImage (asset: Image (decorative: "ic" )))
OUDSCheckboxItemIndeterminate (LocalizedStringKey ("select_all" ), bundle: Bundle .module,
selection: $selection )
Parameter order: (_ label:, isOn:, description:, icon:, isReversed:, isError:, errorText:, isReadOnly:, hasDivider:, constrainedMaxWidth:, action:)
OUDSCheckboxPicker (selections: $selections , checkboxes: [
.init (tag: "a" , label: "Option A" ),
.init (tag: "b" , label: "Option B" , description: "Details" , isReversed: true ),
.init (tag: "c" , label: "Option C" , icon: OUDSImage (asset: Image (systemName: "flame" ))),
.init (tag: "d" , label: "Option D" ,
icon: OUDSImage (asset: Image (decorative: "il_brand" ), renderingMode: .original)),
])
OUDSCheckboxPicker (selections: $selections , checkboxes: data,
placement: .verticalRooted("All options" , .textAndCount))
OUDSCheckboxPicker (selections: $selections , checkboxes: data,
isReversed: true , placement: .horizontal(true ))
Radio Button OUDSRadio (isOn: $isOn , accessibilityLabel: "Label" )
OUDSRadioItem ("Label" , isOn: $isOn )
OUDSRadioItem ("Label" , isOn: $isOn , icon: OUDSImage (asset: Image (decorative: "ic" )))
OUDSRadioItem ("Label" , isOn: $isOn ,
icon: OUDSImage (asset: Image (decorative: "il_brand" ), renderingMode: .original))
OUDSRadioItem ("Label" , isOn: $isOn ,
icon: OUDSImage (asset: Image (systemName: "chevron.right" ),
flipped: layoutDirection == .rightToLeft))
OUDSRadioItem (LocalizedStringKey ("option_label" ), bundle: Bundle .module, isOn: $isOn ,
icon: OUDSImage (asset: Image (decorative: "ic" )))
OUDSRadioPicker (selection: $selection ,
radios: [
.init (tag: "a" , label: "Option A" ),
.init (tag: "b" , label: "Option B" ,
icon: OUDSImage (asset: Image (systemName: "flame" ))),
.init (tag: "c" , label: "Option C" ,
icon: OUDSImage (asset: Image (decorative: "il_brand" ),
renderingMode: .original)),
],
placement: .vertical)
Switch OUDSSwitch (isOn: $isOn , accessibilityLabel: "Label" )
OUDSSwitchItem ("Label" , isOn: $isOn )
OUDSSwitchItem ("Label" , isOn: $isOn ,
icon: OUDSImage (asset: Image (decorative: "ic" )))
OUDSSwitchItem ("Label" , isOn: $isOn ,
icon: OUDSImage (asset: Image (decorative: "il_brand" ), renderingMode: .original))
OUDSSwitchItem ("Label" , isOn: $isOn ,
icon: OUDSImage (asset: Image (systemName: "figure.handball" ),
flipped: layoutDirection == .rightToLeft))
OUDSSwitchItem (LocalizedStringKey ("wifi_setting" ), bundle: Bundle .module, isOn: $isOn ,
icon: OUDSImage (asset: Image (decorative: "ic" )))
Pin Code Input Available lengths: .four, .six (default).
OUDSPinCodeInput ($value )
OUDSPinCodeInput ($value , length: .four, autofocus: true )
OUDSPinCodeInput ($value , helperText: "Enter your PIN" )
Password Input
status is of type OUDSTextInput.Status (shared with OUDSTextInput).
OUDSPasswordInput (label: "Password" , password: $password , isHiddenPassword: $isHidden )
OUDSPasswordInput (label: "Password" , password: $password , isHiddenPassword: $isHidden ,
placeholder: "Min. 8 chars" , prefix: "🔑" , lockIcon: true )
Chips OUDSSuggestionChip (text: "Label" ) {}
OUDSSuggestionChip (icon: OUDSImage (asset: Image ("ic" )), text: "Label" ) {}
OUDSSuggestionChip (icon: OUDSImage (asset: Image ("ic" ), renderingMode: .original), text: "Label" ) {}
OUDSSuggestionChip (icon: OUDSImage (asset: Image ("ic" )), accessibilityLabel: "Label" ) {}
OUDSSuggestionChip (icon: OUDSImage (asset: Image ("ic" ), renderingMode: .original), accessibilityLabel: "Label" ) {}
OUDSFilterChip (text: "Label" ) {}
OUDSFilterChip (icon: OUDSImage (asset: Image ("ic" )), text: "Label" ) {}
OUDSFilterChip (icon: OUDSImage (asset: Image ("ic" ), renderingMode: .original), text: "Label" ) {}
OUDSFilterChip (icon: OUDSImage (asset: Image ("ic" )), accessibilityLabel: "Label" ) {}
OUDSFilterChip (icon: OUDSImage (asset: Image ("ic" ), renderingMode: .original), accessibilityLabel: "Label" ) {}
OUDSChipPicker (title: "Title" , selection: $selection , chips: [
.init (tag: .value1, layout: .textAndIcon("Label" , image: OUDSImage (asset: Image ("ic" )))),
.init (tag: .value2, layout: .textAndIcon("Brand" , image: OUDSImage (asset: Image ("ic_brand" ), renderingMode: .original))),
.init (tag: .value3, layout: .icon(OUDSImage (asset: Image ("ic" )), accessibilityLabel: "Label" )),
.init (tag: .value4, layout: .icon(OUDSImage (asset: Image ("ic_brand" ), renderingMode: .original), accessibilityLabel: "Brand" )),
])
Text Input OUDSTextInput (label: "Label" , text: $text )
OUDSTextInput (label: "Label" , text: $text , placeholder: "…" , prefix: "Pre" , suffix: "Suf" )
OUDSTextInput (label: "Label" , text: $text , leadingIcon: OUDSImage (asset: Image ("ic" )))
OUDSTextInput (label: "Label" , text: $text ,
leadingIcon: OUDSImage (asset: Image ("ic" ), renderingMode: .original))
OUDSTextInput (label: "Label" , text: $text ,
leadingIcon: OUDSImage (asset: Image ("ic" ), flipped: layoutDirection == .rightToLeft))
OUDSTextInput (label: "Label" , text: $text ,
trailingAction: .init (icon: OUDSImage (asset: Image ("ic" )), actionHint: "Hint" ) {})
OUDSTextInput (label: "Label" , text: $text ,
trailingAction: .init (icon: OUDSImage (asset: Image ("ic" ), renderingMode: .original),
actionHint: "Hint" ) {})
Text Area helperText type: .plain(String) | .rich(AttributedString) | .charactersMaxCount(UInt16)
OUDSTextArea (label: "Label" , text: $text )
OUDSTextArea (label: "Label" , text: $text , placeholder: "Describe…" )
OUDSTextArea (label: "Label" , text: $text , helperText: .plain("Max 500 chars." ))
OUDSTextArea (label: "Label" , text: $text , helperText: .charactersMaxCount(500 ))
OUDSTextArea (label: "Label" , text: $text ,
helperLink: .init (text: "Learn more" ) { openUrl(url) })
OUDSTextArea (label: "Label" , text: $text , constrainedMaxHeight: true )
Height is controlled by two component tokens on theme.textArea:
sizeMinHeightInput (72 pt by default) — minimum height, always appliedsizeMaxHeightInput (240 pt by default) — maximum height before scroll (used when constrainedMaxHeight: false, the default)
When constrainedMaxHeight: true, maxHeight is capped to sizeMinHeightInput, keeping the component at a fixed compact size.
