Styling | Swift AI Autocomplete Docs

One value type — AIAutocompleteAppearance — holds every visual token: fonts, colors, radii, spacing, animation. Defaults follow the stock design and adapt to light/dark automatically.

Applying an appearance

Build a value, override what you need, and apply it — the environment modifier in SwiftUI, the appearance property in UIKit.

import AIAutocompleteUIKit

var brand = AIAutocompleteAppearance()
brand.font = .systemFont(ofSize: 16)
brand.inputCornerRadius = 12
brand.pillBorderColor = .systemIndigo
brand.columns = 2

// SwiftUI — applies to every AIAutocomplete / AIAutocompleteDropdown below it
AIAutocomplete(configuration: config)
    .aiAutocompleteAppearance(brand)

// UIKit — assign to the view; restyles in place
autocompleteView.appearance = brand

Light and dark mode

Every default color is a dynamic UIColor that resolves against the system appearance — light and dark both look right with no work. Custom colors can do the same: pass a UIColor closure keyed on userInterfaceStyle, or an asset-catalog color.

var appearance = AIAutocompleteAppearance()
appearance.inputBackgroundColor = UIColor { traits in
    traits.userInterfaceStyle == .dark ? .black : .white
}

Typography

Prop	Type	Default	Description
`font`	`UIFont`	`14pt system, Dynamic Type`	Base font for input text and completed params; pills and options fall back to it. Scales with Dynamic Type.
`pillFont`	`UIFont?`	`nil (falls back to font)`	Pill chip font.
`optionFont`	`UIFont?`	`14pt system, Dynamic Type`	Dropdown option font.
`maxInputLines`	`Int?`	`5`	Lines the input grows to before scrolling internally. nil grows without bound.
`lineSpacing`	`CGFloat`	`4`	Extra spacing between wrapped input lines, in points.
`maximumContentSizeCategory`	`UIContentSizeCategory`	`.accessibilityExtraLarge`	Dynamic Type cap for option text — scales up to this category and no further.

Colors

All UIColor. Defaults are dynamic light/dark pairs mirroring the web SDK's stock palette.

Prop	Type	Default	Description
`textColor`	`UIColor`	—	Free-typed text and completed params in the input.
`placeholderColor`	`UIColor`	—	Placeholder text and unfilled placeholder pills.
`caretColor`	`UIColor`	—	The text caret.
`pillBackgroundColor / pillTextColor`	`UIColor`	—	Pill chip fill and text. The stock pill fill is transparent — the dashed outline is the boundary.
`pillBorderColor`	`UIColor`	—	Outline color of unfilled pills.
`completedParamBackgroundColor / completedParamActiveBackgroundColor`	`UIColor`	—	Completed-param chip fill — resting, and while the param is re-edited. Used when completedParamEmphasis contains .highlight.
`inputBackgroundColor / inputBorderColor`	`UIColor`	—	Input surface fill and border.
`dropdownBackgroundColor / dropdownBorderColor`	`UIColor`	—	Dropdown surface fill and border (solid mode).
`optionTextColor / optionSelectedTextColor`	`UIColor`	—	Option text, normal and highlighted.
`optionHighlightBackgroundColor`	`UIColor`	—	Highlighted option's background fill.
`shimmerColor`	`UIColor`	—	Loading shimmer / skeleton base.
`submitButtonBackgroundColor / submitButtonForegroundColor`	`UIColor`	—	Built-in submit button fill and glyph. Ignored with a custom button.

Pills and completed params

Unfilled suggestion pills render as transparent chips with a dashed outline. Once a param is filled it renders as a compact chip — a faint fill behind its text — that darkens while it's being re-edited. Both looks are tokenized: restyle the outline, pick a different emphasis, or turn the chips off entirely.

var appearance = AIAutocompleteAppearance()

// Unfilled pills: transparent chips with a dashed outline by default
appearance.pillBorderStyle = .solid
appearance.pillBorderColor = .systemIndigo

// Completed params: a faint chip fill by default (.highlight)
appearance.completedParamEmphasis = [.highlight, .bold]  // fill + semibold
appearance.completedParamEmphasis = .bold                // semibold only
appearance.completedParamEmphasis = []                   // plain text

Prop	Type	Default	Description
`pillBorderStyle`	`.dashed \| .solid`	`.dashed`	Dashed or continuous pill outline — inline and in the dropdown pill bar.
`pillBorderWidth`	`CGFloat`	`1`	Width of the pill outline.
`completedParamEmphasis`	`CompletedParamEmphasis`	`.highlight`	.highlight draws the chip fill (with horizontal room reserved around each param), .bold sets semibold text. Combine both, or pass [] for plain text.

Layout

Prop	Type	Default	Description
`inputCornerRadius`	`CGFloat`	`12`	Input surface radius.
`dropdownCornerRadius`	`CGFloat`	`12`	Dropdown card radius.
`pillCornerRadius`	`CGFloat`	`16`	Pill chip radius, clamped to half the chip height — capsules by default.
`optionCornerRadius`	`CGFloat`	`4`	Highlighted option fill (and streak) radius.
`inputBorderWidth / dropdownBorderWidth`	`CGFloat`	`0.8 / 0.2`	Hairline borders around the input and dropdown.
`inputInsets`	`UIEdgeInsets`	`10pt all sides`	Padding between the input surface's edge and its content.
`dropdownGap`	`CGFloat`	`6`	Vertical gap between input and dropdown.
`dropdownMaxHeight`	`CGFloat?`	`nil`	Optional hard cap on the option grid's height. The keyboard bound always applies.
`dropdownShadow`	`Shadow?`	`.default`	Drop shadow cast by the dropdown card — the stock .default is a soft shadow (offset y 8pt, blur radius 6pt). nil draws no shadow. Solid mode only; glass supplies its own depth.
`columns`	`Int`	`1`	Columns in the option grid.
`submitButtonSize / submitButtonSpacing`	`CGFloat`	`28 / 12`	Built-in submit button diameter and its gap from the text.

Animation, haptics, surfaces

Prop	Type	Default	Description
`animations`	`Bool`	`true`	Master switch for the selection streak and shimmer. The system Reduce Motion setting always wins.
`haptics`	`Bool`	`true`	Light haptic tick on param promotion. Independent of animations.
`dropdownSurface`	`.solid \| .glass`	`.solid`	Solid fill, or system glass.