InputField

<InputField>
  <InputField.Label>Name</InputField.Label>
  <TextInput />
</InputField>

<InputField required>
  <InputField.Label>Name</InputField.Label>
  <TextInput />
</InputField>

<InputField disabled>
  <InputField.Label>Name</InputField.Label>
  <TextInput />
</InputField>

const TextInputWithTokensExample = () => {
  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 (
    <Box
      display="flex"
      flexDirection="column"
      sx={{
        '> * + *': {
          marginTop: 4
        }
      }}
    >
      <InputField>
        <InputField.Label>TextInputWithTokens</InputField.Label>
        <TextInputWithTokens onTokenRemove={onTokenRemove} tokens={tokens} />
      </InputField>
      <InputField>
        <InputField.Label>Autocomplete</InputField.Label>
        <Autocomplete>
          <Autocomplete.Input block />
          <Autocomplete.Overlay>
            <Autocomplete.Menu
              items={[
                {text: 'css', id: 0},
                {text: 'css-in-js', id: 1},
                {text: 'styled-system', id: 2},
                {text: 'javascript', id: 3},
                {text: 'typescript', id: 4},
                {text: 'react', id: 5},
                {text: 'design-systems', id: 6}
              ]}
              selectedItemIds={[]}
            />
          </Autocomplete.Overlay>
        </Autocomplete>
      </InputField>
      <InputField>
        <InputField.Label>Select</InputField.Label>
        <Select>
          <Select.Option value="figma">Figma</Select.Option>
          <Select.Option value="css">Primer CSS</Select.Option>
          <Select.Option value="prc">Primer React components</Select.Option>
          <Select.Option value="pvc">Primer ViewComponents</Select.Option>
        </Select>
      </InputField>
    </Box>
  )
}

render(TextInputWithTokensExample)

<InputField>
  <InputField.Label visuallyHidden>Name</InputField.Label>
  <TextInput />
</InputField>

<InputField>
  <InputField.Label>Name</InputField.Label>
  <TextInput />
  <InputField.Caption>Hint: your first name</InputField.Caption>
</InputField>

const ValidationExample = () => {
  const [value, setValue] = React.useState('mona lisa')
  const [validationResult, setValidationResult] = React.useState()
  const doesValueContainSpaces = inputValue => /\s/g.test(inputValue)
  const handleInputChange = e => {
    setValue(e.currentTarget.value)
  }

  React.useEffect(() => {
    if (doesValueContainSpaces(value)) {
      setValidationResult('noSpaces')
    } else if (value) {
      setValidationResult('validName')
    }
  }, [value])

  return (
    <InputField
      validationMap={{
        noSpaces: 'error',
        validName: 'success'
      }}
      validationResult={validationResult}
    >
      <InputField.Label>GitHub handle</InputField.Label>
      <TextInput block value={value} onChange={handleInputChange} />
      <InputField.Validation validationKey="noSpaces">GitHub handles cannot contain spaces</InputField.Validation>
      <InputField.Validation validationKey="validName">Valid name</InputField.Validation>
      <InputField.Caption>With or without "@". For example "monalisa" or "@monalisa"</InputField.Caption>
    </InputField>
  )
}

render(ValidationExample)