Version:

Install ​

shell
npm i @mate-react/text-field

Import ​

tsx
import { MateTextField } from '@mate-react/text-field';

Variants ​

Default ​

tsx
<MateTextField label="Label" helperText="Helper text" clearButtonVisible />

Required ​

tsx
<MateTextField label="Required" required />

Disabled ​

tsx
<MateTextField label="Disabled" disabled />

Read Only ​

tsx
<MateTextField label="Read only" readonly />

Invalid ​

tsx
<MateTextField label="Invalid" invalid errorMessage="Error message" />

With Prefix ​

tsx
<MateTextField label="Price">
  <span slot="prefix">€</span>
</MateTextField>

With Suffix ​

tsx
<MateTextField label="Weight">
  <span slot="suffix">kg</span>
</MateTextField>