# TextInput

**📖 Live documentation:** https://cds.coinbase.com/components/inputs/TextInput/

A control for entering text.

## Import

```tsx
import { TextInput } from '@coinbase/cds-web/controls/TextInput'
```

## Examples

**Note** TextField extends props from [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) on web. On mobile, it extends [TextInputProps](https://reactnative.dev/docs/textinput#props) from react-native.

#### Input Label

Default composition of Inputs.

```jsx live
<VStack gap={3}>
  <TextInput
    label="API Access Token"
    placeholder="HaeJiWplJohn6W42eCq0Qqft0"
    end={
      <Box paddingX={2}>
        <Link variant="caption" color="primary" to="">
          COPY
        </Link>
      </Box>
    }
  />

  <VStack>
    <Text as="p">Use the compact variant when space is tight.</Text>
    <TextInput
      compact
      type="number"
      step="0.01"
      label="Amount"
      placeholder="8293323.23"
      suffix="USD"
    />
  </VStack>
</VStack>
```

#### Accessible Text Inputs

TextInput comes with an accessibilityLabel prop. If no accessibilityLabel is passed, it will use the label as the accessibilityLabel. If you want an accessibilityLabel that differs from the Label, you can set this prop.

Here, since no accessibilityLabel is passed, the accessibilityLabel will be "Email".

```jsx
<TextInput label="Email" />
```

Example of passing an accessibilityLabel. For web, this will set aria-label="Enter a Coinbase Email" under the hood

```jsx
<TextInput accessibilityLabel="Enter a Coinbase Email" label="Email" />
```

:::tip Accessibility tip

Like any component system, much of the responsibility for building accessible UIs is in your hands as the consumer to properly implement the component composition. We'll do our best to provide sane fallbacks, but here are the biggest gotchas for `TextInput`s you can watch out for.

<br />

##### `aria-*` attr overrides

Any time you use `variant='negative'`, we assume you're showing an error state. If for some reason this is _not_ the case, you will want to use `aria-invalid={false}` to override the default configuration.

<br />

##### Message format

It's also advised you always format `helperText` with `Error: ${errorMessage}`. We'd do that for you, but _i18n_ isn't baked into CDS. Take a look at the example below:

:::

```jsx live
<VStack gap={4}>
  <TextInput
    label="Text Input rendered in an errored state"
    placeholder="Enter a color"
    helperText="Error: Your favorite color is not orange"
    variant="negative"
  />
  <TextInput
    label="Text Input that's red but not in an errored state"
    placeholder="Enter a color"
    helperText="You like red?"
    variant="negative"
    // Override the default behavior when variant="negative"
    aria-invalid={false}
  />
</VStack>
```

#### Placeholder Text

```jsx live
<TextInput label="Label" placeholder="Placeholder" />
```

#### Borderless

For borderless TextInput usage, prefer adding a focus border with `focusedBorderWidth`.
If you need a fully borderless input (including focus), use that pattern with a TypeAhead
composition.

```jsx live
<VStack gap={2} padding={2}>
  <TextInput
    label="Borderless TextInput"
    placeholder="placeholder"
    helperText="When bordered is false, focus border styling is disabled by default."
    bordered={false}
  />
  <TextInput
    label="Borderless TextInput (with focus border)"
    placeholder="placeholder"
    helperText="Set focusedBorderWidth to opt into a focus border style."
    bordered={false}
    focusedBorderWidth={200}
  />
</VStack>
```

#### Helper Text

##### Default Sentiment

```jsx live
<VStack gap={3}>
  <VStack>
    <Text as="p" font="headline">
      Default sentiment
    </Text>
    <TextInput
      label="Campaign title"
      placeholder="Title"
      helperText="This won't be displayed to user"
    />
  </VStack>

  <VStack>
    <Text as="p" font="headline">
      Positive sentiment
    </Text>
    <TextInput
      label="Address"
      helperText="Valid BTC address"
      variant="positive"
      placeholder="HaeJiWplJohn6W42eCq0Qqft0"
      end={<InputIcon active color="fgPositive" name="visible" />}
    />
  </VStack>

  <VStack>
    <Text as="p" font="headline">
      Negative Sentiment
    </Text>
    <TextInput
      label="Address"
      helperText="Invalid BTC address"
      variant="negative"
      placeholder="HaeJiWplJohn6W42eCq0Qqft0"
      end={<InputIcon active color="fgNegative" name="visible" />}
    />
  </VStack>
</VStack>
```

#### Color Surge Enabled

```jsx live
<VStack gap={3}>
  <TextInput
    label="Default Color Surge"
    placeholder="Focus me"
    helperText="This won't be displayed to user"
    enableColorSurge
  />

  <TextInput
    label="Positive Color Surge"
    placeholder="Focus me"
    helperText="Valid BTC address"
    variant="positive"
    enableColorSurge
  />

  <TextInput
    label="Negative Color Surge"
    placeholder="Focus me"
    helperText="Invalid BTC address"
    variant="negative"
    enableColorSurge
  />
</VStack>
```

#### Content Alignment

```jsx live
<VStack gap={3}>
  <VStack>
    <Text as="p">
      <strong>Left aligned (default): </strong>
    </Text>
    <TextInput label="City/town" placeholder="Oakland" />
  </VStack>

  <VStack>
    <Text as="p">Right aligned (with compact):</Text>
    <TextInput
      label="Limit price"
      compact
      align="end"
      type="number"
      step="0.01"
      placeholder="29.3"
      suffix="USD"
    />
  </VStack>
</VStack>
```

#### Label Variants

TextInput supports two label variants: `outside` (default) and `inside`. Note that the `compact` prop, when set to true, will override label variant preference.

:::warning

When using the `inside` label variant, you should always include a `placeholder` prop.

:::

```jsx live
<VStack gap={3}>
  <VStack>
    <Text as="p">
      <strong>Outside label (default):</strong>
    </Text>
    <TextInput label="Email Address" placeholder="Enter your email" />
  </VStack>

  <VStack>
    <Text as="p">
      <strong>Inside label:</strong>
    </Text>
    <TextInput label="Email Address" labelVariant="inside" placeholder="Enter your email" />
  </VStack>

  <VStack>
    <Text as="p">
      <strong>Inside label (with start content):</strong>
    </Text>
    <TextInput
      label="Search"
      labelVariant="inside"
      start={<InputIconButton name="search" />}
      placeholder="Search for anything"
    />
  </VStack>

  <VStack>
    <Text as="p">
      <strong>Inside label (with end content):</strong>
    </Text>
    <TextInput
      label="Password"
      labelVariant="inside"
      type="password"
      end={<InputIconButton name="visible" />}
      placeholder="Enter your password"
    />
  </VStack>
</VStack>
```

#### Custom Label

You can pass a ReactNode to `labelNode` to render a custom label. If you want to include a tooltip, ensure the touch target is at least 24x24 for accessibility compliance.

```jsx live
<VStack gap={2}>
  <TextInput
    accessibilityLabel="Display name"
    id="display-name-input"
    labelNode={
      <HStack alignItems="center">
        <InputLabel htmlFor="display-name-input">Display name</InputLabel>
        {/* Add padding to ensure 24x24 tooltip tap target for a11y compliance */}
        <Tooltip content="This will be visible to other users.">
          <Icon active color="fg" name="info" padding={0.75} size="xs" tabIndex={0} />
        </Tooltip>
      </HStack>
    }
    placeholder="Satoshi Nakamoto"
  />
  <TextInput
    accessibilityLabel="Amount"
    compact
    labelNode={
      <InputLabel>
        <HStack alignItems="center" gap={0.5}>
          Amount
          <Text color="fgNegative" font="label1">
            *
          </Text>
        </HStack>
      </InputLabel>
    }
    placeholder="0.00"
    suffix="USD"
  />
  <TextInput
    accessibilityLabel="Bio"
    id="bio-input"
    labelVariant="inside"
    labelNode={
      <InputLabel htmlFor="bio-input" paddingY={0}>
        <HStack alignItems="center" gap={1}>
          Bio
          <Text color="fgMuted" font="legal">
            (optional)
          </Text>
        </HStack>
      </InputLabel>
    }
    placeholder="Tell us about yourself"
  />
  <TextInput
    accessibilityLabel="Notes"
    id="notes-input"
    labelVariant="inside"
    labelNode={
      <InputLabel htmlFor="notes-input" paddingY={0}>
        Notes
      </InputLabel>
    }
    placeholder="Add a note"
    start={<InputIcon name="pencil" />}
  />
</VStack>
```

#### StartContent & EndContent

##### Examples of Input Objects placed at the Start

```jsx live
function StartContentExamples() {
  return (
    <VStack gap={3}>
      <VStack>
        <Text as="p">
          <strong>Asset</strong>: Asset objects are not interactive
        </Text>
        <TextInput
          label="Address"
          start={
            <Box paddingX={2}>
              <Avatar
                size="l"
                src="https://dynamic-assets.coinbase.com/e785e0181f1a23a30d9476038d9be91e9f6c63959b538eabbc51a1abc8898940383291eede695c3b8dfaa1829a9b57f5a2d0a16b0523580346c6b8fab67af14b/asset_icons/b57ac673f06a4b0338a596817eb0a50ce16e2059f327dc117744449a47915cb2.png"
                alt="address"
              />
            </Box>
          }
          placeholder="HaeJiWplJohn6W42eCq0Qqft0"
        />
      </VStack>

      <VStack>
        <Text as="p">
          <strong>Icon</strong>: Icon objects are not interactive.
        </Text>
        <TextInput label="Amount" start={<InputIcon name="cashUSD" />} placeholder="1234" />
      </VStack>

      <VStack>
        <Text as="p">
          <strong>IconButton</strong>: The most common use case for Icon Button at the start of a
          Text Field is search.
        </Text>
        <TextInput
          label="Search"
          start={<InputIconButton name="search" />}
          placeholder="Search for anything"
        />
      </VStack>
    </VStack>
  );
}
```

#### Read Only

TextInput supports a read-only state which is visually distinct from the disabled state. Read-only inputs have a secondary background color and can still be focused.

```jsx live
<VStack gap={3}>
  <TextInput label="Read Only Input" readOnly value="This value cannot be edited" />
  <TextInput label="Read Only with Suffix" readOnly value="1234.56" suffix="USD" />
  <TextInput
    label="Read Only with Start Content"
    readOnly
    value="BTC Address"
    start={<InputIconButton name="search" />}
  />
</VStack>
```

### Example of Input Objects placed at the End

Here are some examples and best practices when using end content in a TextField.

```jsx live
<VStack gap={3}>
  <VStack>
    <Text as="p">
      <strong>Icon</strong>: Icon objects are not interactive.
    </Text>
    <TextInput
      label="Address"
      placeholder="1234 Abc Way"
      end={<InputIcon name="checkmark" color="fgPositive" />}
    />
  </VStack>

  <VStack>
    <Text as="p">
      The most common use case for placing a text object at the end of an input is currency. This
      object is not interactive.
    </Text>
    <TextInput
      label="Amount"
      type="number"
      step="0.01"
      compact
      placeholder="98329.23"
      suffix="USD"
    />
  </VStack>

  <VStack>
    <Text as="p">
      You can add a Text Button object at the end of an Input. "Copy" is a great example of this.
    </Text>
    <TextInput
      label="API Access Token"
      placeholder="HaeJiWplJohn6W42eCq0Qqft0"
      end={
        <Box spacingEnd={2}>
          <Link variant="caption" color="primary" to="">
            COPY
          </Link>
        </Box>
      }
    />
  </VStack>
</VStack>
```

#### Password input

Password Input - Use Icon Buttons at the end for actions like showing a password or clearing text from an input.

> a11y tip: Always provide an `accessibilityLabel` to start/end nodes to clearly communicate state/actions

```jsx live
function PasswordInput() {
  const [isVisible, setIsVisible] = useState(false);
  const type = useMemo(() => (isVisible ? 'text' : 'password'), [isVisible]);
  const iconName = useMemo(() => (isVisible ? 'visible' : 'invisible'), [isVisible]);

  return (
    <TextInput
      label="Password"
      type={type}
      end={
        <InputIconButton
          name={iconName}
          onClick={() => setIsVisible((isVisible) => !isVisible)}
          accessibilityLabel={isVisible ? 'Hide password' : 'Show password'}
        />
      }
    />
  );
}
```

#### Link + Icon Button

If needed, you can add a Link + Icon Button like this example here. Use this sparingly and only at the End of an Input.

```jsx live
function CopyTextField() {
  const [copied, setCopied] = useState(false);
  const [variant, setVariant] = useState('foregroundMuted');
  const [helperText, setHelperText] = useState('');

  useEffect(() => {
    if (copied) {
      setVariant('positive');
      setHelperText('Your token has been copied!');
    } else {
      setVariant('foregroundMuted');
      setHelperText('');
    }
  }, [copied]);

  const handleOnChange = useCallback(() => {
    setVariant('foregroundMuted');
    setCopied(false);
    setHelperText('');
  }, []);

  return (
    <TextInput
      end={
        <HStack>
          <Link onClick={() => setCopied(true)} variant="caption" color={variant}>
            {copied ? 'copied' : 'copy'}
          </Link>
          <InputIcon active color="primary" name="visible" />
        </HStack>
      }
      onChange={handleOnChange}
      variant={variant}
      helperText={helperText}
      label="API Access Token"
    />
  );
}
```

#### Disabled

```jsx live
<VStack gap={3}>
  <TextInput label="Label" disabled />
  <TextInput label="Label" compact disabled />
</VStack>
```

#### Example of a Form

We recommend that you use spacing 3 when building stacked forms.

```jsx live
function FormExample() {
  const gap = 3;

  const onSubmit = useCallback((e) => {
    e.preventDefault();
    console.log(e.currentTarget.nodeValue);
    alert('Submitted');
  }, []);

  return (
    <form onSubmit={onSubmit} action={undefined}>
      <VStack gap={gap}>
        <TextInput
          label="Street address"
          placeholder="4321 Jade Palace"
          helperText="Please enter your primary address."
        />
        <TextInput label="Unit #" aria-required="true" />
        <HStack gap={gap}>
          <TextInput label="City/town" width="70%" />
          <TextInput label="State" width="30%" />
        </HStack>
        <HStack gap={gap}>
          <TextInput label="Postal code" width="40%" />
          <TextInput label="Country" width="60%" />
        </HStack>
        <ButtonGroup>
          <Button type="submit">Save</Button>
        </ButtonGroup>
      </VStack>
    </form>
  );
}
```

#### Example of a Sign Up Form

```jsx live
<HStack gap={2} alignItems="center">
  <TextInput
    label="Email"
    placeholder="satoshi@nakamoto.com"
    helperText="Please enter a valid email address"
  />
  <Box spacingTop={0.5}>
    <Button variant="primary">Submit</Button>
  </Box>
</HStack>
```

### Testing

#### Testing different parts of the input

You can also use the testIDMap to test different parts
of the TextInput. If you use testID, it will add the testID to the root
of the TextInput.

```jsx live
function testExample() {
  const testIDMap = useMemo(() => {
    return {
      input: 'input-id',
      helperText: 'helperText-id',
      label: 'label-id',
      start: 'start-id',
      end: 'end-id',
    };
  }, []);
  return (
    <TextInput
      label="Email"
      placeholder="satoshi@nakamoto.com"
      helperText="Please enter a valid email address"
      testIDMap={testIDMap}
      start={
        <Box paddingX={2}>
          <Avatar
            size="l"
            src="https://dynamic-assets.coinbase.com/e785e0181f1a23a30d9476038d9be91e9f6c63959b538eabbc51a1abc8898940383291eede695c3b8dfaa1829a9b57f5a2d0a16b0523580346c6b8fab67af14b/asset_icons/b57ac673f06a4b0338a596817eb0a50ce16e2059f327dc117744449a47915cb2.png"
            alt="address"
          />
        </Box>
      }
      end={<InputIcon active color="primary" name="visible" />}
    />
  );
}
```

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `align` | `center \| start \| end \| justify` | No | `start` | Text Align Input |
| `alignContent` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| baseline \| first baseline \| last baseline \| space-between \| space-around \| space-evenly>` | No | `-` | - |
| `alignItems` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
| `alignSelf` | `ResponsiveProp<center \| normal \| auto \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
| `as` | `input` | No | `-` | The underlying element or component the polymorphic component will render.  Changing as also changes the inherited native props (e.g. href for as=a) and the expected ref type. |
| `aspectRatio` | `ResponsiveProp<AspectRatio>` | No | `-` | - |
| `background` | `ResponsiveProp<Color>` | No | `-` | - |
| `borderBottomLeftRadius` | `ResponsiveProp<BorderRadius>` | No | `-` | - |
| `borderBottomRightRadius` | `ResponsiveProp<BorderRadius>` | No | `-` | - |
| `borderBottomWidth` | `ResponsiveProp<BorderWidth>` | No | `-` | - |
| `borderColor` | `ResponsiveProp<Color>` | No | `-` | - |
| `borderEndWidth` | `ResponsiveProp<BorderWidth>` | No | `-` | - |
| `borderRadius` | `ResponsiveProp<BorderRadius>` | No | `200` | Leverage one of the borderRadius styles we offer to round the corners of the input. |
| `borderStartWidth` | `ResponsiveProp<BorderWidth>` | No | `-` | - |
| `borderTopLeftRadius` | `ResponsiveProp<BorderRadius>` | No | `-` | - |
| `borderTopRightRadius` | `ResponsiveProp<BorderRadius>` | No | `-` | - |
| `borderTopWidth` | `ResponsiveProp<BorderWidth>` | No | `-` | - |
| `borderWidth` | `ResponsiveProp<BorderWidth>` | No | `-` | - |
| `bordered` | `boolean` | No | `true` | Add a border around all sides of the box. Adds border to input. When set to false, focus border styling is disabled by default. |
| `borderedBottom` | `boolean` | No | `-` | Add a border to the bottom side of the box. |
| `borderedEnd` | `boolean` | No | `-` | Add a border to the trailing side of the box. |
| `borderedHorizontal` | `boolean` | No | `-` | Add a border to the leading and trailing sides of the box. |
| `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
| `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
| `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
| `bottom` | `ResponsiveProp<Bottom<string \| number>>` | No | `-` | - |
| `color` | `ResponsiveProp<Color>` | No | `-` | - |
| `columnGap` | `ResponsiveProp<Space>` | No | `-` | - |
| `compact` | `boolean` | No | `false` | Enables compact variation |
| `containerSpacing` | `string` | No | `-` | Custom container spacing if needed. This will add to the existing spacing |
| `dangerouslySetBackground` | `string` | No | `-` | - |
| `disabled` | `boolean` | No | `false` | Toggles input interactability and opacity |
| `display` | `ResponsiveProp<grid \| revert \| none \| block \| inline \| inline-block \| flex \| inline-flex \| inline-grid \| contents \| flow-root \| list-item>` | No | `-` | - |
| `elevation` | `ResponsiveProp<Elevation>` | No | `-` | - |
| `enableColorSurge` | `boolean` | No | `-` | Enable Color Surge motion |
| `end` | `ReactNode` | No | `-` | Adds content to the end of the inner input. Refer to diagram for location of endNode in InputStack component |
| `flexBasis` | `ResponsiveProp<FlexBasis<string \| number>>` | No | `-` | - |
| `flexDirection` | `ResponsiveProp<column \| row \| row-reverse \| column-reverse>` | No | `-` | - |
| `flexGrow` | `ResponsiveProp<FlexGrow>` | No | `-` | - |
| `flexShrink` | `ResponsiveProp<FlexShrink>` | No | `-` | - |
| `flexWrap` | `ResponsiveProp<nowrap \| wrap \| wrap-reverse>` | No | `-` | - |
| `focusedBorderWidth` | `BorderWidth` | No | `-` | Additional border width when focused. Set this when bordered={false} to opt into a focus border style. |
| `font` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
| `fontFamily` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
| `fontSize` | `ResponsiveProp<FontSize \| inherit>` | No | `-` | - |
| `fontWeight` | `ResponsiveProp<FontWeight \| inherit>` | No | `-` | - |
| `gap` | `ResponsiveProp<Space>` | No | `-` | - |
| `grid` | `ResponsiveProp<Grid>` | No | `-` | - |
| `gridArea` | `ResponsiveProp<GridArea>` | No | `-` | - |
| `gridAutoColumns` | `ResponsiveProp<GridAutoColumns<string \| number>>` | No | `-` | - |
| `gridAutoFlow` | `ResponsiveProp<GridAutoFlow>` | No | `-` | - |
| `gridAutoRows` | `ResponsiveProp<GridAutoRows<string \| number>>` | No | `-` | - |
| `gridColumn` | `ResponsiveProp<GridColumn>` | No | `-` | - |
| `gridColumnEnd` | `ResponsiveProp<GridColumnEnd>` | No | `-` | - |
| `gridColumnStart` | `ResponsiveProp<GridColumnStart>` | No | `-` | - |
| `gridRow` | `ResponsiveProp<GridRow>` | No | `-` | - |
| `gridRowEnd` | `ResponsiveProp<GridRowEnd>` | No | `-` | - |
| `gridRowStart` | `ResponsiveProp<GridRowStart>` | No | `-` | - |
| `gridTemplate` | `ResponsiveProp<GridTemplate>` | No | `-` | - |
| `gridTemplateAreas` | `ResponsiveProp<GridTemplateAreas>` | No | `-` | - |
| `gridTemplateColumns` | `ResponsiveProp<GridTemplateColumns<string \| number>>` | No | `-` | - |
| `gridTemplateRows` | `ResponsiveProp<GridTemplateRows<string \| number>>` | No | `-` | - |
| `height` | `ResponsiveProp<Height<string \| number>>` | No | `-` | Height of input |
| `helperText` | `ReactNode` | No | `-` | For cases where label is not enough information to describe what the text input is for. Can also be used for showing positive/negative messages |
| `helperTextErrorIconAccessibilityLabel` | `string` | No | `'error'` | Accessibility label for helper text error icon when variant=negative |
| `inputBackground` | `Color` | No | `'bg'` | Background color of the input. |
| `inputNode` | `ReactElement` | No | `-` | Customize the element which the input area will be rendered as. Adds ability to render the input area as a <textarea />, <input /> etc... By default, the input area will be rendered as an <input />. |
| `justifyContent` | `ResponsiveProp<left \| right \| center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| space-between \| space-around \| space-evenly>` | No | `-` | - |
| `key` | `Key \| null` | No | `-` | - |
| `label` | `string` | No | `-` | Short messageArea indicating purpose of input |
| `labelNode` | `ReactNode` | No | `-` | React node to render label. Takes precedence over label. |
| `labelVariant` | `inside \| outside` | No | `'outside'` | The variant of the label. Only used when compact is not true. |
| `left` | `ResponsiveProp<Left<string \| number>>` | No | `-` | - |
| `lineHeight` | `ResponsiveProp<LineHeight \| inherit>` | No | `-` | - |
| `margin` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
| `marginBottom` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
| `marginEnd` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
| `marginStart` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
| `marginTop` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
| `marginX` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
| `marginY` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
| `maxHeight` | `ResponsiveProp<MaxHeight<string \| number>>` | No | `-` | - |
| `maxWidth` | `ResponsiveProp<MaxWidth<string \| number>>` | No | `-` | - |
| `minHeight` | `ResponsiveProp<MinHeight<string \| number>>` | No | `-` | - |
| `minWidth` | `ResponsiveProp<MinWidth<string \| number>>` | No | `-` | - |
| `onChange` | `FormEventHandler<HTMLDivElement>` | No | `-` | - |
| `opacity` | `ResponsiveProp<Opacity>` | No | `-` | - |
| `overflow` | `ResponsiveProp<hidden \| auto \| visible \| clip \| scroll>` | No | `-` | - |
| `padding` | `ResponsiveProp<Space>` | No | `-` | - |
| `paddingBottom` | `ResponsiveProp<Space>` | No | `-` | - |
| `paddingEnd` | `ResponsiveProp<Space>` | No | `-` | - |
| `paddingStart` | `ResponsiveProp<Space>` | No | `-` | - |
| `paddingTop` | `ResponsiveProp<Space>` | No | `-` | - |
| `paddingX` | `ResponsiveProp<Space>` | No | `-` | - |
| `paddingY` | `ResponsiveProp<Space>` | No | `-` | - |
| `pin` | `PinningDirection` | No | `-` | Direction in which to absolutely pin the box. |
| `placeholder` | `string` | No | `-` | Placeholder text displayed inside of the input. Will be replaced if there is a value. |
| `position` | `ResponsiveProp<fixed \| static \| relative \| absolute \| sticky>` | No | `-` | - |
| `ref` | `((instance: HTMLInputElement \| null) => void) \| RefObject<HTMLInputElement> \| null` | No | `-` | - |
| `right` | `ResponsiveProp<Right<string \| number>>` | No | `-` | - |
| `rowGap` | `ResponsiveProp<Space>` | No | `-` | - |
| `start` | `ReactNode` | No | `-` | Adds content to the start of the inner input. Refer to diagram for location of startNode in InputStack component |
| `style` | `CSSProperties` | No | `-` | - |
| `suffix` | `string` | No | `-` | Adds suffix text to the end of input |
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
| `testIDMap` | `{ start?: string; end?: string \| undefined; label?: string \| undefined; helperText?: string \| undefined; } \| undefined` | No | `-` | Add ability to test individual parts of the input |
| `textAlign` | `ResponsiveProp<center \| start \| end \| justify>` | No | `-` | - |
| `textDecoration` | `ResponsiveProp<none \| underline \| overline \| line-through \| underline overline \| underline double>` | No | `-` | - |
| `textTransform` | `ResponsiveProp<capitalize \| lowercase \| none \| uppercase>` | No | `-` | - |
| `top` | `ResponsiveProp<Top<string \| number>>` | No | `-` | - |
| `transform` | `ResponsiveProp<Transform>` | No | `-` | - |
| `type` | `button \| reset \| submit` | No | `-` | - |
| `userSelect` | `ResponsiveProp<text \| none \| auto \| all>` | No | `-` | - |
| `value` | `string \| number \| readonly string[]` | No | `-` | - |
| `variant` | `InputVariant` | No | `foregroundMuted` | Determines the sentiment of the input. Because we allow startContent and endContent to be custom ReactNode, the content placed inside these slots will not change colors according to the variant. You will have to add that yourself |
| `visibility` | `ResponsiveProp<hidden \| visible>` | No | `-` | - |
| `width` | `ResponsiveProp<Width<string \| number>>` | No | `100%` | Width of input as a percentage string. |
| `zIndex` | `ResponsiveProp<ZIndex>` | No | `-` | - |