Components
InputAdornment
Put an icon, a unit or a button before or after the text of an input.
InputAdornment holds the small element inside the frame of a TextField or Select. The frame
spaces it from the text, and a start adornment shrinks the label. It is a client component and
reads theme defaultProps.
import InputAdornment from '@hone-ui/react/InputAdornment';Examples
$
USD
kg
<Stack spacing={2} sx={{ maxWidth: 260 }}>
<TextField
label="Amount"
slotProps={{
input: {
startAdornment: <InputAdornment position="start">$</InputAdornment>,
endAdornment: <InputAdornment position="end">USD</InputAdornment>,
},
}}
/>
<TextField
variant="filled"
label="Weight"
slotProps={{
input: { endAdornment: <InputAdornment position="end">kg</InputAdornment> },
}}
/>
</Stack>A button inside an end adornment stays clickable. Give it an aria-label.
<TextField
label="Password"
type={show ? 'text' : 'password'}
slotProps={{
input: {
endAdornment: (
<InputAdornment position="end">
<IconButton aria-label="Show password" onClick={() => setShow(!show)}>
{show ? 'Hide' : 'Show'}
</IconButton>
</InputAdornment>
),
},
}}
/>Select takes the same element through startAdornment and endAdornment:
<Select
aria-label="Weight"
defaultValue="10"
endAdornment={<InputAdornment position="end">kg</InputAdornment>}
>
<MenuItem value="10">Ten</MenuItem>
</Select>Props
| Prop | Type | Default | Description |
|---|---|---|---|
position | 'start', 'end' | required | Which side of the text. |
children | ReactNode | none | A string renders in Typography body1 with the secondary text color. |
disableTypography | boolean | false | Keeps a string child as plain text. |
disablePointerEvents | boolean | false | Clicks pass through the adornment to the input. |
variant | 'outlined', 'filled', 'standard' | from FormControl | The frame of the surrounding input. |
component | ElementType | 'div' | The root element. |
sx, className, style, ref | Standard. They go to the root element. |
Notes
- In the Material look, the start adornment of a filled field with a label sits 16px lower, so it
meets the text. A
hiddenLabelfield does not need that offset. - A bare string or element passed as
startAdornmentstill works. InputAdornment adds the variant classes and the Typography wrapper.
Accessibility
An adornment is part of the visual frame, not a label. Text such as "kg" is read in order with the
input. Name any button inside it with aria-label.