Field
Single-line text input. The label is always visible above it.
Used to confirm your booking.
Phone number must be 10 to 13 digits.
Variants
Fields have no border. A border only appears on focus and on error.
Sizes
Same heights as Button so they line up. lg uses 16 px text so iOS does not zoom.
States and icons
Usage
import { Field } from '@smartui/react';
import '@smartui/react/styles.css';When to use
- Short single-line text.
- Always with a visible label.
When not to use
- Long text. Use Textarea.
- Using the placeholder as the label.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | - | Always visible above the control. |
helperText | string | - | Help text below the control. |
errorMessage | string | - | Shown when isInvalid; replaces the helper text. |
variant | 'raised' | 'flat' | 'raised' | Raised on the canvas, flat inside a white card. |
size | 'sm' | 'md' | 'lg' | 'md' | md on desktop, lg on touch. |
isInvalid, isDisabled, isRequired | boolean | false | |
placeholder | string | - | An example of the expected format. |
type | 'text' | 'email' | 'tel' | 'number' | 'password' | 'text' | |
leadingIcon, trailingAction | ReactNode | - | |
value, defaultValue, onChange | string, string, (v) => void | - |
Accessibility
- The label is linked to the input.
- Error messages are announced, not only shown in red.
- Because there is no border, the visible label and focus ring are required.