OverviewIntroductionIntroductionUsageUsageThemeThemeLayoutBoxBoxContainerContainerFlexFlex GridGridSectionSectionTypographyTextText HeadingHeadingComponentsAccordionAccordionAlert DialogAlert DialogAvatarAvatarBadgeBadgeBlockquoteBlockquoteButtonButton CalloutCallout CardCard CheckboxCheckbox ChipChip Code BlockCode Block Code EditorCode Editor Color FieldColor Field Data ListData ListDefinition ListDefinition ListDialogDialogHover CardHover CardIcon ButtonIcon Button InsetInset Image FieldImage Field LabelLabel MarkerMarkerPermanent LinkPermanent LinkPopoverPopoverProgressProgressRadio Card GroupRadio Card GroupScreenshotScreenshotScroll AreaScroll AreaSegmented ControlSegmented ControlSelectSelectSeparatorSeparator SkeletonSkeleton SpinnerSpinner StatusStatus SwitchSwitch TableTableTabsTabsText AreaText Area Text FieldText FieldTooltipTooltipZoomableZoomableFormattingCodeCodeEmEmKbdKbdQuoteQuoteStrongStrongIconsLogo IconLogo IconFeature IconFeature IconProvider IconProvider IconIcon PanelIcon PanelNavigationPage NavPage NavQuick NavQuick NavUtilitiesDesign System ProviderDesign System ProviderRecipesCopy ButtonCopy Button Copy ChipCopy Chip Theme ToggleTheme Toggle

Text Field

Displays a text field input with an optional slot for buttons and icons.

 <TextField.Root placeholder="Text Field">
  <TextField.Slot>
    <FaceIcon height="16" width="16" />
  </TextField.Slot>
</TextField.Root>

Anatomy

Import the component and piece the parts together.

 import { TextField } from '@workos-inc/design-system';

export default () => (
  <TextField.Root>
    <TextField.Slot />
    <TextField.Slot />
  </TextField.Root>
);

API Reference

The Text Field component is made up of Root and Slot parts. View source.

Root

Renders the text field input and accepts Slot parts.

Prop	Type	Default
`invalid`	`boolean`	`false`
`size`	`"1" \| "2" \| "3"`	`"2"`
`variant`	`"classic" \| "surface" \| "soft"`	`"classic"`

This component is based on the input element and supports common margin props m, mx, my, ml, mr, mt, mb.

Slot

Contains icons or buttons associated with the text field, and provides the correct gap and padding according to the text field size.

Prop	Type	Default
`side`	`"left" \| "right"`	`–`
`gap`	`Responsive<Union<string, "0" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9">>`	`—`
`px`	`Responsive<Union<string, "0" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9">>`	`—`
`pl`	`Responsive<Union<string, "0" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9">>`	`—`
`pr`	`Responsive<Union<string, "0" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9">>`	`—`

Examples

With Slots

You can compose up to two Slot parts – one on the left, and one on the right. The Slots provide a default gap and padding for its contents.

 <TextField.Root defaultValue="workos.design" spellCheck="false">
  <TextField.Slot>
    <InfoCircledIcon height="16" width="16" />
  </TextField.Slot>

  <TextField.Slot>
    <IconButton size="1">
      <Share2Icon height="16" width="16" />
    </IconButton>
    <IconButton size="1">
      <StarIcon height="16" width="16" />
    </IconButton>
  </TextField.Slot>
</TextField.Root>

Without Slots

You can use just the Root part if Slots are not needed.

 <TextField.Root placeholder="Just the input" />

Variants

Use the variant prop to control the visual style of the input.

 <Grid columns={{ md: '3' }} gap="3">
  <TextField.Root placeholder="Classic" variant="classic" />
  <TextField.Root placeholder="Surface" variant="surface" />
  <TextField.Root placeholder="Soft" variant="soft" />
</Grid>

Sizes

Use the size prop to control the size of the input.

 <Grid columns={{ md: '3' }} gap="3">
  <Flex direction="column" gap="3">
    <TextField.Root placeholder="Size 1" size="1" />
    <TextField.Root placeholder="Size 2" size="2" />
    <TextField.Root placeholder="Size 3" size="3" />
  </Flex>

  <Flex direction="column" gap="3">
    <TextField.Root placeholder="Size 1" size="1" variant="surface" />
    <TextField.Root placeholder="Size 2" size="2" variant="surface" />
    <TextField.Root placeholder="Size 3" size="3" variant="surface" />
  </Flex>

  <Flex direction="column" gap="3">
    <TextField.Root placeholder="Size 1" size="1" variant="soft" />
    <TextField.Root placeholder="Size 2" size="2" variant="soft" />
    <TextField.Root placeholder="Size 3" size="3" variant="soft" />
  </Flex>
</Grid>

Use matching component sizes when composing Text Field with buttons. However, don’t use size 1 inputs with buttons – at this size, there is not enough vertical space to nest other interactive elements.

 <Flex direction="column" gap="3" maxWidth="400px">
  <TextField.Root size="1" placeholder="Size 1">
    <TextField.Slot>
      <InfoCircledIcon height="16" width="16" />
    </TextField.Slot>
  </TextField.Root>

  <TextField.Root size="2" placeholder="Size 2">
    <TextField.Slot>
      <InfoCircledIcon height="16" width="16" />
    </TextField.Slot>
    <TextField.Slot>
      <IconButton size="1">
        <Share2Icon height="16" width="16" />
      </IconButton>
    </TextField.Slot>
  </TextField.Root>

  <TextField.Root size="3" placeholder="Size 3">
    <TextField.Slot>
      <InfoCircledIcon height="16" width="16" />
    </TextField.Slot>
    <TextField.Slot>
      <IconButton size="2">
        <Share2Icon height="16" width="16" />
      </IconButton>
    </TextField.Slot>
  </TextField.Root>
</Flex>

States

The state prop is deprecated, as the types of state it represents may not be mutually exclusive. Use disabled, readOnly or invalid instead.

The invalid prop indicates that the field’s value is invalid. Fields are styled as valid by default, though built-in client-side validation still applies. In a future version we may synchronize styled validation with the field’s internal validity state.

 <Flex direction="column" gap="3" maxWidth="400px">
  <TextField.Root defaultValue="Valid" />
  <TextField.Root defaultValue="Invalid" invalid />
</Flex>