Search Fields — macOS 27

Read when: you need an exact macOS 27 value for search Fields (size, colour, text, effect) as Apple's kit draws it. Owns: Search Fields in Apple's macOS 27 kit: components, anatomy, sizes, colours and states, text, effects, kit notes.

Source: specs/search-fields.txt from Apple's macOS 27 UI Kit (Sketch, v27.0.3), read 2026-11-01. Values are copied from the kit; derived values say so.

Components

The page has 76 components in two families:

The building-block names contain the glyph 􀻃 (U+100EC3).

• The page has no Content Area / Over-glass axis.
• It has no hover or clicked state for the field itself.
• Every field component is 120 pt wide.

Anatomy

The field is a horizontal auto-layout row (stack h). It is a capsule (corners max) carrying the field style. Its children:

• In Empty + Typing the I-beam is at the start of the Stack (x 0) and the placeholder follows at x 2.
• In Value + Typing the I-beam follows the text (x = text width).
• The Clear button is absent from Empty and from Value + Disabled. It is present in Empty + Disabled.
• The magnifier and clear masters (Magnifying Glass/without Menu, Clear/3 - Clicked) exist, but no field on this page uses them.

Glyph building blocks

Each master has a background fill that the kit names as a kit swatch: #CCE6FF {x. Kit/Nested Symbol BG Light} or #366799 {x. Kit/Nested Symbol BG Dark}.

Sizes

Geometry is identical in Light and Dark (checked for every size and state). The field style's own corner radius is 9; every field overrides it with corners max.

Children in the non-typing states:

Children in the Typing states:

In the Typing states the Symbol and Clear instances keep the positions in the first table.

Derived values:

• Text x = left padding + Symbol width + gap 3 (Rg: 8 + 21 + 3 = 32; Mn: 6 + 17 + 3 = 26).
• Typing Stack x = left padding + Symbol width + gap 1 (Rg: 8 + 21 + 1 = 30).
• Clear x = field width − right padding − Clear width (Rg: 120 − 4 − 16 = 100).
• Clear y = (field height − 15) ÷ 2 (Rg: (24 − 15) ÷ 2 = 4.5). At Mn the Clear instance is full height (13 × 16 @0).
• The text frame fills the space between the Symbol and the Clear button (Rg, with Clear: 120 − 8 − 21 − 3 − 3 − 16 − 4 = 65).
• Typing Stack width = field width − Stack x − gap 1 − Clear width − right padding (Rg: 120 − 30 − 1 − 16 − 4 = 69).
• Symbol instances are stretched to the field height (Rg 21 × 24, from a 21 × 15 master), except in XL Empty and XL Value. The Mn Clear instance is 13 × 16, from a 13 × 13 master; the other Clear instances keep the master size, 16 × 15.
• Leading inset (left padding): XL 10, Lg 8, Rg 8, Sm 6, Mn 6. Trailing inset (right padding): XL 8, Lg 6, Rg 4, Sm 2.5, Mn 2.

Colours and states

Field styles are in control-styles-content-area.md / control-styles-over-glass.md (Content Area/<Appearance>/Input Fields/…).

• The page has one context only. Its styles are the Content Area input-field styles.
• Colours are the same in every size (checked across all five sizes).

Light

Light Focus Ring: style Content Area/Light/Input Fields/03 - Focus Ring. Border 3.5 outside #0088FF {System Colors/Light/8 Blue} + border 1 inside #0088FF, layer opacity 50%, corners max.

Dark

Dark Focus Ring: style Content Area/Dark/Input Fields/03 - Focus Ring. Border 3.5 outside #0091FF {System Colors/Dark/8 Blue} (blend plus-lighter) + border 1 inside #0091FF (blend plus-lighter), layer opacity 50%, corners max.

Glyph colours

How Disabled differs from Idle:

• In Light: only the field fill (50% white) and the border alpha (4% instead of 5%) change. Text and glyph colours stay the same.
• In Dark: the whole field also drops to opacity 50%.

Text

• No shared text style is linked on this page.
• Placeholder text is "Search"; entered text is "Value".
• Text blend: plus-darker (Light), plus-lighter (Dark).

Effects

The page has no shadows, blurs or glass.

Kit notes

The page has no documentation boards and no notes from Apple. Its only top-level text layers are the headings "Search Fields", "Light" and "Dark".

Finding it in the spec