role searchbox
Search field draft v0.1.0
Lets people type what they are looking for.
A search field collects a search term: a query for a whole site, a filter for a list. It is a Text field with a search glyph at its start, exposed to assistive technology as a search box, and whose clear control the platform provides. It has a visible label, which may be the only word next to it (Search), and an optional description; it has no error state: a search that finds nothing is reported by the results, not by the field.
Tokens
From packages/tokens/src/components/search-field.tokens.json. Path grammar: search-field.<part>.<property>[.<option>][.<state>]. Every value aliases a semantic token.
No token matches.
Part container (1)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
search-field.container.gap
Between the label, the control, the description and the error message.
|
dimension |
{space.4}
|
4px
|
--search-field-container-gap
|
Part label (3)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
search-field.label.color.default
|
color |
{global.text.on-base.neutral.primary}
|
light
#0E0D0D
dark
#D2CECF
|
--search-field-label-color-default
|
search-field.label.color.disabled
|
color |
{global.text.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--search-field-label-color-disabled
|
search-field.label.typography
|
typography |
{body.family}{body.size.sm}{body.weight.medium}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":500,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--search-field-label-typography-font-family--search-field-label-typography-font-size--search-field-label-typography-font-weight--search-field-label-typography-line-height--search-field-label-typography-letter-spacing
|
Part control (28)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
search-field.control.min-height.small
|
dimension |
{space.32}
|
32px
|
--search-field-control-min-height-small
|
search-field.control.min-height.medium
|
dimension |
{space.40}
|
40px
|
--search-field-control-min-height-medium
|
search-field.control.min-height.large
|
dimension |
{space.48}
|
48px
|
--search-field-control-min-height-large
|
search-field.control.padding-inline.small
|
dimension |
{space.8}
|
8px
|
--search-field-control-padding-inline-small
|
search-field.control.padding-inline.medium
|
dimension |
{space.12}
|
12px
|
--search-field-control-padding-inline-medium
|
search-field.control.padding-inline.large
|
dimension |
{space.16}
|
16px
|
--search-field-control-padding-inline-large
|
search-field.control.border-radius
|
dimension |
{corner-radius.xs}
|
4px
|
--search-field-control-border-radius
|
search-field.control.border-width
|
dimension |
{stroke-width.sm}
|
0.6px
|
--search-field-control-border-width
|
search-field.control.background.default
|
color |
{global.bg.level.0.default}
|
light
#FDFDFD
dark
#191919
|
--search-field-control-background-default
|
search-field.control.background.hover
|
color |
{global.bg.level.0.hover}
|
light
#F7F6F6
dark
#212121
|
--search-field-control-background-hover
|
search-field.control.background.disabled
|
color |
{global.bg.state.disabled.default}
|
light
#B6B4B41a
dark
#7676764d
|
--search-field-control-background-disabled
|
search-field.control.border-color.default
|
color |
{global.border.accent.neutral.default}
|
light
#323031
dark
#B9B7B7
|
--search-field-control-border-color-default
|
search-field.control.border-color.disabled
|
color |
{global.border.state.disabled.default}
|
light
#B6B4B466
dark
#363636b2
|
--search-field-control-border-color-disabled
|
search-field.control.color.default
|
color |
{global.text.on-base.neutral.primary}
|
light
#0E0D0D
dark
#D2CECF
|
--search-field-control-color-default
|
search-field.control.color.disabled
|
color |
{global.text.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--search-field-control-color-disabled
|
search-field.control.placeholder-color.default
|
color |
{global.text.on-base.neutral.tertiary}
|
light
#616161
dark
#9D9B9C
|
--search-field-control-placeholder-color-default
|
search-field.control.placeholder-color.disabled
|
color |
{global.text.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--search-field-control-placeholder-color-disabled
|
search-field.control.typography.small
|
typography |
{body.family}{body.size.sm}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--search-field-control-typography-small-font-family--search-field-control-typography-small-font-size--search-field-control-typography-small-font-weight--search-field-control-typography-small-line-height--search-field-control-typography-small-letter-spacing
|
search-field.control.typography.medium
|
typography |
{body.family}{body.size.md}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":16,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--search-field-control-typography-medium-font-family--search-field-control-typography-medium-font-size--search-field-control-typography-medium-font-weight--search-field-control-typography-medium-line-height--search-field-control-typography-medium-letter-spacing
|
search-field.control.typography.large
|
typography |
{body.family}{body.size.lg}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":20,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--search-field-control-typography-large-font-family--search-field-control-typography-large-font-size--search-field-control-typography-large-font-weight--search-field-control-typography-large-line-height--search-field-control-typography-large-letter-spacing
|
search-field.control.outline-width.focus-visible
|
dimension |
{focus.ring.width}
|
2.4px
|
--search-field-control-outline-width-focus-visible
|
search-field.control.outline-offset.focus-visible
|
dimension |
{focus.ring.offset}
|
4px
|
--search-field-control-outline-offset-focus-visible
|
search-field.control.outline-color.focus-visible
|
color |
{color.focus.ring}
|
light
#175DD6
dark
#9EE7FA
|
--search-field-control-outline-color-focus-visible
|
search-field.control.transition.duration
|
duration |
{duration.fast}
|
150ms
|
--search-field-control-transition-duration
|
search-field.control.transition.easing
|
cubicBezier |
{easing.standard}
|
cubic-bezier(0.2, 0, 0, 1)
|
--search-field-control-transition-easing
|
search-field.control.padding-inline-start.small
|
dimension |
{space.28}
|
28px
|
--search-field-control-padding-inline-start-small
|
search-field.control.padding-inline-start.medium
|
dimension |
{space.36}
|
36px
|
--search-field-control-padding-inline-start-medium
|
search-field.control.padding-inline-start.large
|
dimension |
{space.40}
|
40px
|
--search-field-control-padding-inline-start-large
|
Part icon (11)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
search-field.icon.font-family
|
fontFamily |
{font.icon.family}
|
"Material Symbols Outlined"
|
--search-field-icon-font-family
|
search-field.icon.font-weight
|
fontWeight |
{font.icon.weight.light}
|
300
|
--search-field-icon-font-weight
|
search-field.icon.fill
|
number |
{font.icon.fill.off}
|
0
|
--search-field-icon-fill
|
search-field.icon.grade
|
number |
{font.icon.grade.normal}
|
0
|
--search-field-icon-grade
|
search-field.icon.optical-size
|
number |
{font.icon.optical-size.20}
|
20
|
--search-field-icon-optical-size
|
search-field.icon.size.small
|
dimension |
{size.2}
|
16px
|
--search-field-icon-size-small
|
search-field.icon.size.medium
|
dimension |
{size.3}
|
20px
|
--search-field-icon-size-medium
|
search-field.icon.size.large
|
dimension |
{size.4}
|
24px
|
--search-field-icon-size-large
|
search-field.icon.margin-inline
|
dimension |
{space.8}
|
8px
|
--search-field-icon-margin-inline
|
search-field.icon.color.default
|
color |
{global.icon.on-base.neutral.tertiary}
|
light
#616161
dark
#9D9B9C
|
--search-field-icon-color-default
|
search-field.icon.color.disabled
|
color |
{global.icon.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--search-field-icon-color-disabled
|
Part description (3)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
search-field.description.color.default
|
color |
{global.text.on-base.neutral.secondary}
|
light
#323031
dark
#B9B7B7
|
--search-field-description-color-default
|
search-field.description.color.disabled
|
color |
{global.text.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--search-field-description-color-disabled
|
search-field.description.typography
|
typography |
{body.family}{body.size.sm}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--search-field-description-typography-font-family--search-field-description-typography-font-size--search-field-description-typography-font-weight--search-field-description-typography-line-height--search-field-description-typography-letter-spacing
|
Parts without tokens: field (they inherit from their parent).