Displays a text field input with an optional slot for buttons and icons.
defaultValuestring | numberinvalidsizestatesuppressPasswordManagerstypevaluestring | numbervariantAlso supports MarginProps: `m`, `mb`, `ml`, `mr`, `mt`, `mx`, `my`
colorgapplprpxsideYou can compose up to two Slot parts – one on the left, and one on the right. The Slots provide a default gap and padding for its contents.
Use the size prop to control the size of the input.
Use matching component sizes when composing Text Field with buttons. However, don’t use size 1 inputs with buttons – at this size, there is not enough vertical space to nest other interactive elements.
The state prop is deprecated, as the types of state it represents may not be mutually exclusive. Use disabled, readOnly or invalid instead.
The invalid prop indicates that the field’s value is invalid. Fields are styled as valid by default, though built-in client-side validation still applies. In a future version we may synchronize styled validation with the field’s internal validity state.
10 variants found
<Form.Control asChild>
<TextField.Root
disabled={!watch('isPasswordHistoryEnabled')}
max={10}
min={1}
name={field.name}
size="1"
style={{ width: 50 }}
type="number"
value={field.value}
onBlur={(event) => {
const value = event.target.value;
field.onChange(
value
? Math.max(Math.min(Number(value), 10), 1)
: initialPasswordHistorySize,
);
}}
onChange={(event) => {
const value = event.target.value;
field.onChange(
value
? Math.max(Math.min(Number(value), 10), 1)
: '',
);
}}
onFocus={(event) => {
event.target.select();
}}
/>
</Form.Control><TextField.Root
aria-hidden
readOnly
suppressPasswordManagers
autoComplete="off"
className={styles.triggerTextField}
disabled={disabled}
placeholder={placeholder}
role="presentation"
size="2"
tabIndex={-1}
type="text"
value={selectedValue ? renderInputValue(selectedValue) : ''}
variant="surface"
onKeyDown={(event) => event.preventDefault()}
onFocus={(event) => {
// In the event that the input is focused programmatically,
// redirect focus to the trigger
event.preventDefault();
triggerRef.current?.focus();
}}
>
<TextField.Slot>
<BracesIcon />
</TextField.Slot>
<TextField.Slot>
<Flex
align="center"
height="16px"
justify="center"
width="16px"
>
{selectedValue ? (
<ComboboxClear
className={styles.clearButton}
disabled={disabled}
triggerId={triggerId}
onClear={() => {
flushSync(() => {
handleSelectionChange(null);
});
triggerRef.current?.focus();
}}
/>
) : (
<ChevronDownIcon />
)}
</Flex>
</TextField.Slot>
</TextField.Root>4 variants found
/p/:portalSessionId/audit-logs/autocomplete
/p/:portalSessionId/audit-logs/audit-logs-table/audit-logs-export-csv-modal
/p/:portalSessionId/log-streams/:logStreamId/completed/components/edit/details
/p/:portalSessionId/log-streams/:logStreamId/completed/components/edit/details
Also supports MarginProps: m, mb, ml, mr, mt, mx, my
stateType: "disabled" | "normal" | "read-only" | "invalid"Used 348 times across 2 packages
side
size
disabled
variant
160 files
/p/:portalSessionId/log-streams/:logStreamId/completed/components/edit/details
Show 150 more files