TextField

Text fields allow users to enter and edit text.

Import

import { TextField } from '@md3-react/core';

Basic Usage

Live Editor

<Demo>
  <TextField label="Email" placeholder="Enter your email" />
</Demo>

Result

Loading...

Variants

MD3 defines two text field variants:

Filled

Live Editor

<Demo>
  <TextField variant="filled" label="Filled text field" />
</Demo>

Result

Loading...

Outlined

Live Editor

<Demo>
  <TextField variant="outlined" label="Outlined text field" />
</Demo>

Result

Loading...

With Helper Text

Live Editor

<Demo>
  <TextField 
    label="Password" 
    type="password"
    helperText="Must be at least 8 characters" 
  />
</Demo>

Result

Loading...

Error State

Live Editor

<Demo>
  <TextField 
    label="Email" 
    value="invalid-email"
    error
    errorText="Please enter a valid email address" 
  />
</Demo>

Result

Loading...

With Icons

Live Editor

<Demo>
  <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
    <TextField 
      label="Search" 
      leadingIcon={<Search size={20} />}
    />
    <TextField 
      label="Password" 
      type="password"
      trailingIcon={<Visibility size={20} />}
    />
  </div>
</Demo>

Result

Loading...

With Prefix/Suffix

Live Editor

<Demo>
  <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
    <TextField 
      label="Price" 
      prefix="$"
    />
    <TextField 
      label="Weight" 
      suffix="kg"
    />
  </div>
</Demo>

Result

Loading...

Character Count

Live Editor

function Example() {
  const [value, setValue] = React.useState('');
  return (
    <Demo>
      <TextField 
        label="Bio" 
        value={value}
        onChange={(e) => setValue(e.target.value)}
        maxLength={100}
        showCharacterCount
        helperText="Tell us about yourself"
      />
    </Demo>
  );
}

Result

Loading...

Disabled State

Live Editor

<Demo>
  <TextField label="Disabled field" value="Cannot edit" disabled />
</Demo>

Result

Loading...

Full Width

Live Editor

<Demo>
  <TextField label="Full width field" fullWidth />
</Demo>

Result

Loading...

Props

Prop	Type	Default	Description
variant	'filled' | 'outlined'	'filled'	Visual style variant
label	string	-	Field label
helperText	string	-	Helper text below field
error	boolean	false	Shows error state
errorText	string	-	Error message (shown when error)
leadingIcon	ReactNode	-	Icon at start of field
trailingIcon	ReactNode	-	Icon at end of field
prefix	string	-	Text prefix inside field
suffix	string	-	Text suffix inside field
showCharacterCount	boolean	false	Shows character count
maxLength	number	-	Maximum character limit
fullWidth	boolean	false	Takes full container width
disabled	boolean	false	Disables the field

Plus all standard <input> HTML attributes.

Accessibility

• Labels are properly associated with inputs
• Error messages are linked via aria-describedby
• Helper text is accessible to screen readers