tsx
'use client';
​
import {useState} from 'react';
import {XDSTextInput} from '@xds/core/TextInput';
import {XDSVStack} from '@xds/core/Layout';
import {XDSCenter} from '@xds/core/Center';
​
export default function FieldWithDescription() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
​
  return (
    <XDSCenter>
      <XDSVStack gap={4}>
        <XDSTextInput
          label="Email"
          description="We'll send a confirmation link to this address"
          value={email}
          onChange={setEmail}
          placeholder="you@example.com"
        />
        <XDSTextInput
          label="Password"
          description="At least 8 characters with one uppercase letter"
          value={password}
          onChange={setPassword}
          placeholder="Create a password"
        />
      </XDSVStack>
    </XDSCenter>
  );
}

tsx
'use client';
​
import {useState} from 'react';
import {XDSTextInput} from '@xds/core/TextInput';
import {XDSVStack} from '@xds/core/Layout';
import {XDSCenter} from '@xds/core/Center';
​
export default function FieldRequired() {
  const [username, setUsername] = useState('');
  const [email, setEmail] = useState('');
​
  return (
    <XDSCenter>
      <XDSVStack gap={4}>
        <XDSTextInput
          label="Username"
          isRequired
          value={username}
          onChange={setUsername}
          placeholder="Enter your username"
        />
        <XDSTextInput
          label="Backup email"
          isOptional
          value={email}
          onChange={setEmail}
          placeholder="you@example.com"
        />
      </XDSVStack>
    </XDSCenter>
  );
}

tsx
'use client';
​
import {useState} from 'react';
import {XDSTextInput} from '@xds/core/TextInput';
import {XDSVStack} from '@xds/core/Layout';
import {XDSCenter} from '@xds/core/Center';
​
export default function FieldStatusVariants() {
  const [email, setEmail] = useState('bad-email');
  const [username, setUsername] = useState('admin');
  const [apiKey, setApiKey] = useState('sk-live-abc123');
​
  return (
    <XDSCenter>
      <XDSVStack gap={4}>
        <XDSTextInput
          label="Email"
          description="Enter your work email"
          value={email}
          onChange={setEmail}
          status={{
            type: 'error',
            message: 'Please enter a valid email address',
          }}
        />
        <XDSTextInput
          label="Username"
          description="Choose a unique username"
          value={username}
          onChange={setUsername}
          status={{
            type: 'warning',
            message: 'This username is reserved for administrators',
          }}
        />
        <XDSTextInput
          label="API Key"
          description="Paste your API key"
          value={apiKey}
          onChange={setApiKey}
          status={{type: 'success', message: 'API key is valid and active'}}
        />
      </XDSVStack>
    </XDSCenter>
  );
}