role textbox
Text field draft v0.1.0
Lets people enter or edit a single line of text.
A text field collects one line of free text: a name, an email address, a search term, a quantity typed as text. It has a visible label above, an optional description and, when its value fails validation, an error message under it. Several lines of text are a Textarea; a choice among known values is a Select.
Playground
Token inspector
Part container
Not rendered in this configuration.
-
gap from default
{space.4}Details
- Value
-
4px - CSS
--text-field-container-gap- Token
text-field.container.gap
Part label
Not rendered in this configuration.
-
color
defaultfrom default{global.text.on-base.neutral.primary}Details
- Resolves through
light-switch.base.950 rawneutral.light.ash.950 raw- Value
-
#0E0D0Ddark:#D2CECF - CSS
--text-field-label-color-default- Token
text-field.label.color.default
-
color
disabledfrom default{global.text.state.disabled.default}Details
- Resolves through
light-switch.base.500 rawneutral.light.ash.500 raw- Value
-
#8C8C8Cdark:#9D9B9Cb2 - CSS
--text-field-label-color-disabled- Token
text-field.label.color.disabled
-
typography from default
Details
- Value
-
Inter [object Object]/1.5 500 [object Object] - CSS
--text-field-label-typography-font-family- Token
text-field.label.typography
Part control
Not rendered in this configuration.
-
min-height
smallfrom default{space.32}Details
- Value
-
32px - CSS
--text-field-control-min-height-small- Token
text-field.control.min-height.small- Decisions
-
min-height
mediumfrom default{space.40}Details
- Value
-
40px - CSS
--text-field-control-min-height-medium- Token
text-field.control.min-height.medium- Decisions
-
min-height
largefrom default{space.48}Details
- Value
-
48px - CSS
--text-field-control-min-height-large- Token
text-field.control.min-height.large- Decisions
-
padding-inline
smallfrom default{space.8}Details
- Value
-
8px - CSS
--text-field-control-padding-inline-small- Token
text-field.control.padding-inline.small- Decisions
-
padding-inline
mediumfrom default{space.12}Details
- Value
-
12px - CSS
--text-field-control-padding-inline-medium- Token
text-field.control.padding-inline.medium- Decisions
-
padding-inline
largefrom default{space.16}Details
- Value
-
16px - CSS
--text-field-control-padding-inline-large- Token
text-field.control.padding-inline.large- Decisions
-
border-radius from default
{corner-radius.xs}Details
- Value
-
4px - CSS
--text-field-control-border-radius- Token
text-field.control.border-radius- Decisions
-
border-width from default
{stroke-width.sm}Details
- Value
-
0.6px - CSS
--text-field-control-border-width- Token
text-field.control.border-width- Decisions
-
background
defaultfrom default{global.bg.level.0.default}Details
- Resolves through
global.bg.base.neutral.1 semanticlight-switch.base.25 rawneutral.light.ash.25 raw- Value
-
#FDFDFDdark:#191919 - CSS
--text-field-control-background-default- Token
text-field.control.background.default- Decisions
-
background
hoverfrom default{global.bg.level.0.hover}Details
- Resolves through
global.bg.base.neutral.2 semanticlight-switch.base.50 rawneutral.light.ash.50 raw- Value
-
#F7F6F6dark:#212121 - CSS
--text-field-control-background-hover- Token
text-field.control.background.hover- Decisions
-
background
readonlyfrom default{global.bg.level.1.default}Details
- Resolves through
global.bg.base.neutral.2 semanticlight-switch.base.50 rawneutral.light.ash.50 raw- Value
-
#F7F6F6dark:#212121 - CSS
--text-field-control-background-readonly- Token
text-field.control.background.readonly- Decisions
-
background
disabledfrom default{global.bg.state.disabled.default}Details
- Value
-
#B6B4B41adark:#7676764d - CSS
--text-field-control-background-disabled- Token
text-field.control.background.disabled- Decisions
-
border-color
defaultfrom default{global.border.accent.neutral.default}Details
- Resolves through
light-switch.base.800 rawneutral.light.ash.800 raw- Value
-
#323031dark:#B9B7B7 - CSS
--text-field-control-border-color-default- Token
text-field.control.border-color.default- Decisions
-
border-color
invalidfrom default{global.border.base.functional.error.default}Details
- Resolves through
functional.error.600 raw- Value
-
#C01619dark:#E12A23 - CSS
--text-field-control-border-color-invalid- Token
text-field.control.border-color.invalid- Decisions
-
border-color
disabledfrom default{global.border.state.disabled.default}Details
- Value
-
#B6B4B466dark:#363636b2 - CSS
--text-field-control-border-color-disabled- Token
text-field.control.border-color.disabled- Decisions
-
color
defaultfrom default{global.text.on-base.neutral.primary}Details
- Resolves through
light-switch.base.950 rawneutral.light.ash.950 raw- Value
-
#0E0D0Ddark:#D2CECF - CSS
--text-field-control-color-default- Token
text-field.control.color.default- Decisions
-
color
disabledfrom default{global.text.state.disabled.default}Details
- Resolves through
light-switch.base.500 rawneutral.light.ash.500 raw- Value
-
#8C8C8Cdark:#9D9B9Cb2 - CSS
--text-field-control-color-disabled- Token
text-field.control.color.disabled- Decisions
-
placeholder-color
defaultfrom default{global.text.on-base.neutral.tertiary}Details
- Resolves through
light-switch.base.600 rawneutral.light.ash.600 raw- Value
-
#616161dark:#9D9B9C - CSS
--text-field-control-placeholder-color-default- Token
text-field.control.placeholder-color.default
-
placeholder-color
disabledfrom default{global.text.state.disabled.default}Details
- Resolves through
light-switch.base.500 rawneutral.light.ash.500 raw- Value
-
#8C8C8Cdark:#9D9B9Cb2 - CSS
--text-field-control-placeholder-color-disabled- Token
text-field.control.placeholder-color.disabled
-
typography
smallfrom defaultDetails
- Value
-
Inter [object Object]/1.5 400 [object Object] - CSS
--text-field-control-typography-small-font-family- Token
text-field.control.typography.small- Decisions
-
typography
mediumfrom defaultDetails
- Value
-
Inter [object Object]/1.5 400 [object Object] - CSS
--text-field-control-typography-medium-font-family- Token
text-field.control.typography.medium- Decisions
-
typography
largefrom defaultDetails
- Value
-
Inter [object Object]/1.5 400 [object Object] - CSS
--text-field-control-typography-large-font-family- Token
text-field.control.typography.large- Decisions
-
outline-width
focus-visiblefrom default{focus.ring.width}Details
- Resolves through
stroke-width.lg semantic- Value
-
2.4px - CSS
--text-field-control-outline-width-focus-visible- Token
text-field.control.outline-width.focus-visible
-
outline-offset
focus-visiblefrom default{focus.ring.offset}Details
- Resolves through
space.4 semantic- Value
-
4px - CSS
--text-field-control-outline-offset-focus-visible- Token
text-field.control.outline-offset.focus-visible
-
outline-color
focus-visiblefrom default{color.focus.ring}Details
- Resolves through
brand.light.600 raw- Value
-
#175DD6dark:#9EE7FA - CSS
--text-field-control-outline-color-focus-visible- Token
text-field.control.outline-color.focus-visible
-
transition.duration from default
{duration.fast}Details
- Value
-
150ms - CSS
--text-field-control-transition-duration- Token
text-field.control.transition.duration
-
transition.easing from default
{easing.standard}Details
- Value
-
cubic-bezier(0.2, 0, 0, 1) - CSS
--text-field-control-transition-easing- Token
text-field.control.transition.easing
Part description
Not rendered in this configuration.
-
color
defaultfrom default{global.text.on-base.neutral.secondary}Details
- Resolves through
light-switch.base.800 rawneutral.light.ash.800 raw- Value
-
#323031dark:#B9B7B7 - CSS
--text-field-description-color-default- Token
text-field.description.color.default
-
color
disabledfrom default{global.text.state.disabled.default}Details
- Resolves through
light-switch.base.500 rawneutral.light.ash.500 raw- Value
-
#8C8C8Cdark:#9D9B9Cb2 - CSS
--text-field-description-color-disabled- Token
text-field.description.color.disabled
-
typography from default
Details
- Value
-
Inter [object Object]/1.5 400 [object Object] - CSS
--text-field-description-typography-font-family- Token
text-field.description.typography
Part error-message
Not rendered in this configuration.
-
color from default
{global.text.on-base.functional.error.default}Details
- Resolves through
functional.error.500 raw- Value
-
#E12A23dark:#EE5248 - CSS
--text-field-error-message-color- Token
text-field.error-message.color
-
typography from default
Details
- Value
-
Inter [object Object]/1.5 500 [object Object] - CSS
--text-field-error-message-typography-font-family- Token
text-field.error-message.typography
<div class="ds-text-field" data-size="medium">
<label
class="ds-text-field__label"
data-part="label"
for="ds-text-field-27"
>Full name</label>
<input
type="text"
class="ds-text-field__control"
data-part="control"
id="ds-text-field-27"
value="Ada Lovelace"
>
</div>