diff --git a/docs/content/TextInputWithTokens.mdx b/docs/content/TextInputWithTokens.mdx
index caa3b07f647..3c16f506bf1 100644
--- a/docs/content/TextInputWithTokens.mdx
+++ b/docs/content/TextInputWithTokens.mdx
@@ -185,6 +185,37 @@ const MaxHeightExample = () => {
render(MaxHeightExample)
```
+### With an error validation status
+
+```javascript live noinline
+const BasicExample = () => {
+ const [tokens, setTokens] = React.useState([
+ {text: 'zero', id: 0},
+ {text: 'one', id: 1},
+ {text: 'two', id: 2}
+ ])
+ const onTokenRemove = tokenId => {
+ setTokens(tokens.filter(token => token.id !== tokenId))
+ }
+
+ return (
+ <>
+
+ Basic example tokens
+
+
+ >
+ )
+}
+
+render(BasicExample)
+```
+
## Props
@@ -225,7 +256,7 @@ render(MaxHeightExample)
defaultValue="false"
description="Whether the remove buttons should be rendered in the tokens"
/>
-
+
(
disabled={disabled}
aria-required={required}
aria-disabled={disabled}
+ aria-invalid={validationStatus === 'error' ? 'true' : 'false'}
{...rest}
>
{placeholder && (
diff --git a/src/TextInputWithTokens.tsx b/src/TextInputWithTokens.tsx
index c63f538e54b..8ac994a4c2c 100644
--- a/src/TextInputWithTokens.tsx
+++ b/src/TextInputWithTokens.tsx
@@ -9,7 +9,7 @@ import {TokenSizeKeys} from './Token/TokenBase'
import {TextInputProps} from './TextInput'
import {useProvidedRefOrCreate} from './hooks'
import UnstyledTextInput from './_UnstyledTextInput'
-import TextInputWrapper, {StyledWrapperProps, textInputHorizPadding} from './_TextInputWrapper'
+import TextInputWrapper, {textInputHorizPadding, TextInputSizes} from './_TextInputWrapper'
import Box from './Box'
import Text from './Text'
import {isFocusable} from '@primer/behaviors/utils'
@@ -42,13 +42,9 @@ type TextInputWithTokensInternalProps & {
@@ -240,6 +235,12 @@ function TextInputWithTokensInnerComponent = {
+ small: 'small',
+ medium: 'small',
+ large: 'medium',
+ extralarge: 'medium'
+ }
return (
diff --git a/src/_TextInputWrapper.tsx b/src/_TextInputWrapper.tsx
index f5bedf4c2a6..5b52ae93496 100644
--- a/src/_TextInputWrapper.tsx
+++ b/src/_TextInputWrapper.tsx
@@ -4,6 +4,8 @@ import {get} from './constants'
import sx, {SxProp} from './sx'
import {FormValidationStatus} from './utils/types/FormValidationStatus'
+export type TextInputSizes = 'small' | 'medium' | 'large'
+
const sizeDeprecatedVariants = variant({
variants: {
small: {
@@ -53,8 +55,8 @@ export type StyledWrapperProps = {
hasLeadingVisual?: boolean
hasTrailingVisual?: boolean
/** @deprecated Use `size` prop instead */
- variant?: 'small' | 'large'
- size?: 'small' | 'large'
+ variant?: TextInputSizes
+ size?: TextInputSizes
} & StyledBaseWrapperProps
const textInputBasePadding = '12px'
diff --git a/src/stories/TextInputWithTokens.stories.tsx b/src/stories/TextInputWithTokens.stories.tsx
index c04d7fcb1b8..85aef4618a9 100644
--- a/src/stories/TextInputWithTokens.stories.tsx
+++ b/src/stories/TextInputWithTokens.stories.tsx
@@ -54,13 +54,6 @@ export default {
type: 'radio'
}
},
- inputSize: {
- defaultValue: 'small',
- options: ['small', 'large'],
- control: {
- type: 'radio'
- }
- },
hideTokenRemoveButtons: {
defaultValue: false,
control: {