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.

Ir a la instalación

Repositorio: Orange-OpenSource/ouds-ios
Última actividad en el origen: 23 de julio de 2026 a las 14:15
Idioma detectado de SKILL.md: inglés
Estrellas: 34
Forks: 9

Opciones de instalación

De forma predeterminada está seleccionado el prompt que primero revisa el origen. Puedes cambiar a un comando directo o descargar una copia local.

Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.

Un comando directo omite el prompt de revisión. Revisa el origen antes de ejecutarlo.

npx skills add https://github.com/Orange-OpenSource/ouds-ios --skill ouds-ios-components-controls

El comando permanece en una sola línea. Desplázate horizontalmente para revisarlo antes de copiarlo.

¿Prefieres una copia local? Descarga los archivos que SkillsMP tiene disponibles ahora.

Revisa los archivos de origen

Lee SKILL.md y los archivos complementarios que muestra SkillsMP antes de decidir si quieres instalarlo.

SKILL.md

Instrucciones de origen · Vista previa de solo lectura

Volver a la búsqueda Volver a la instalación

ouds-ios-components-foundations

Usage and code examples for OUDS iOS Foundations components — Typography (OUDSDisplay, OUDSHeading, OUDSBody, OUDSLabel, OUDSCode). Load the ouds-ios-framework-usage skill first for imports, themes and image rules.

2026-08-27

ouds-ios-guide-create-theme

Use when the user wants to create a custom OUDS theme or brand theme for an iOS app — covers subclassing OrangeTheme, building a theme from scratch on OUDSTheme, mixing existing providers, local custom fonts (.ttf registration), and tuning.

2026-08-27

ouds-ios-framework-usage

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).

2026-08-18

Ver todos los de este repositorio

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: AttributedString`
Plain helper	`helperText: "…"`
Rich helper	`helperText: AttributedString`
Error status (inputs)	`status: .error(message: "…")`
Rich error status	`status: .richError(message: AttributedString)`
Read-only	`isReadOnly: true`
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)
// Raw (non-tinted) image:
OUDSCheckboxItem("Label", isOn: $isOn,
                 icon: OUDSImage(asset: Image(decorative: "il_brand"), renderingMode: .original))
// Flip icon for RTL:
OUDSCheckboxItem("Label", isOn: $isOn,
                 icon: OUDSImage(asset: Image(systemName: "figure.handball"),
                                 flipped: layoutDirection == .rightToLeft))
// LocalizedStringKey:
OUDSCheckboxItem(LocalizedStringKey("agree_terms"), bundle: Bundle.module, isOn: $isOn,
                 icon: OUDSImage(asset: Image(decorative: "ic")))

(, selection: ,
                               icon: (asset: (decorative: )))
((), bundle: .module,
                               selection: )

Parameter order: (_ label:, isOn:, description:, icon:, isReversed:, isError:, errorText:, isReadOnly:, hasDivider:, constrainedMaxWidth:, action:)

// Picker — icon is OUDSImage?
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")))
// Raw (non-tinted) image:
OUDSRadioItem("Label", isOn: $isOn,
              icon: OUDSImage(asset: Image(decorative: "il_brand"), renderingMode: .original))
// Flip icon for RTL:
OUDSRadioItem("Label", isOn: $isOn,
              icon: OUDSImage(asset: Image(systemName: "chevron.right"),
                              flipped: layoutDirection == .rightToLeft))
// LocalizedStringKey:
OUDSRadioItem(LocalizedStringKey("option_label"), bundle: Bundle.module, isOn: $isOn,
              icon: OUDSImage(asset: Image(decorative: "ic")))
// Error / helper / disabled → see "Common patterns" above
OUDSRadioPicker(selection: $selection,
                radios: [
                    .init(tag: "a", label: "Option A"),
                    .init(tag: "b", label: "Option B",
                          icon: OUDSImage(asset: Image(systemName: ))),
                    .(tag: , label: ,
                          icon: (asset: (decorative: ),
                                         renderingMode: .original)),
                ],
                placement: .vertical)

Switch

OUDSSwitch(isOn: $isOn, accessibilityLabel: "Label")
OUDSSwitchItem("Label", isOn: $isOn)
OUDSSwitchItem("Label", isOn: $isOn,
               icon: OUDSImage(asset: Image(decorative: "ic")))
// Raw (non-tinted) image:
OUDSSwitchItem("Label", isOn: $isOn,
               icon: OUDSImage(asset: Image(decorative: "il_brand"), renderingMode: .original))
// Flip icon for RTL:
OUDSSwitchItem("Label", isOn: $isOn,
               icon: OUDSImage(asset: Image(systemName: "figure.handball"),
                               flipped: layoutDirection == .rightToLeft))
// LocalizedStringKey:
OUDSSwitchItem(LocalizedStringKey("wifi_setting"), bundle: Bundle.module, isOn: $isOn,
               icon: OUDSImage(asset: Image(decorative: "ic")))
// Error / helper / disabled → see "Common patterns" above

Pin Code Input

Available lengths: .four, .six (default).

OUDSPinCodeInput($value)
OUDSPinCodeInput($value, length: .four, autofocus: true)
OUDSPinCodeInput($value, helperText: "Enter your PIN")
// Error status → see "Common patterns" (status: .error / .richError)

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)
// Helper / error status → see "Common patterns"

Chips

OUDSSuggestionChip(text: "Label") {}
OUDSSuggestionChip(icon: OUDSImage(asset: Image("ic")), text: "Label") {}
OUDSSuggestionChip(icon: OUDSImage(asset: Image("ic"), renderingMode: .original), text: "Label") {} // raw image (not tinted)
OUDSSuggestionChip(icon: OUDSImage(asset: Image("ic")), accessibilityLabel: "Label") {}
OUDSSuggestionChip(icon: OUDSImage(asset: Image("ic"), renderingMode: .original), accessibilityLabel: "Label") {} // raw image (not tinted)
OUDSFilterChip(text: "Label") {}
OUDSFilterChip(icon: OUDSImage(asset: Image("ic")), text: "Label") {}
OUDSFilterChip(icon: OUDSImage(asset: Image("ic"), renderingMode: .original), text: "Label") {} // raw image (not tinted)
OUDSFilterChip(icon: OUDSImage(asset: Image("ic")), accessibilityLabel: "Label") {}
OUDSFilterChip(icon: OUDSImage(asset: Image("ic"), renderingMode: .original), accessibilityLabel: "Label") {} // raw image (not tinted)
OUDSChipPicker(title: , selection: , chips: [
    .(tag: .value1, layout: .textAndIcon(, image: (asset: ()))),
    .(tag: .value2, layout: .textAndIcon(, image: (asset: (), renderingMode: .original))), 
    .(tag: .value3, layout: .icon((asset: ()), accessibilityLabel: )),
    .(tag: .value4, layout: .icon((asset: (), renderingMode: .original), accessibilityLabel: )), 
])

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)) // raw image (not tinted)
OUDSTextInput(label: "Label", text: $text,
              leadingIcon: OUDSImage(asset: Image("ic"), flipped: layoutDirection == .rightToLeft)) // flip for RTL
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") {}) // raw image
// Helper / error status → see "Common patterns"

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) })
// Fixed height — no vertical growth, scroll from first overflow line
OUDSTextArea(label: "Label", text: $text, constrainedMaxHeight: true)
// Error status → see "Common patterns"

Height is controlled by two component tokens on theme.textArea:

sizeMinHeightInput (72 pt by default) — minimum height, always applied

sizeMaxHeightInput (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.

ouds-ios-components-controls

Datos de origen

Opciones de instalación

Revisa los archivos de origen

Más de este repositorio

Más de este repositorio

OUDS Controls components

Common patterns (shared across most Controls)

Checkbox

Radio Button

Switch

Pin Code Input

Password Input

Chips

Text Input

Text Area

OUDS Controls components

Common patterns (shared across most Controls)

Checkbox

Radio Button

Switch

Pin Code Input

Password Input

Chips

Text Input

Text Area