Input
A text field.
Pick a date in October.
In context
Invite to Tideline
Password reveal
Only you can read your journal. We cannot reset this.
Reconciliation journal
Reconciliation journal
Create
Choose a passphrase
The passphrases do not match.
Type, padding and focus tokens
Props
| Prop | Type | Required | Default |
|---|---|---|---|
size | "sm" | "md" | "lg" | undefined | No | md |
invalid | boolean | undefined | No | — |
mask | string | undefined | No | — |
revealable | boolean | { visible: boolean; onVisibleChange?: ((visible: boolean) => void) | undefined; } | undefined | No | — |
autoHide | boolean | undefined | No | — |
startIcon | ReactNode | No | — |
fieldStyle | "solid" | "translucent" | undefined | No | — |
revealIcons | { show: ReactNode; hide: ReactNode; } | undefined | No | — |
revealStyle | "default" | "plain" | undefined | No | — |
toggleLabels | { show: string; hide: string; } | undefined | No | — |
Accessibility
A plain <input>: wrap it in a <label> or pass aria-label. mask shapes what is typed (9 digit, a letter, * any, other characters are literals); it does not validate, so pair it with pattern or required and say the constraint in words.
data-rebar-* attributes
data-rebar-size on the element; otherwise a native <input> with every native attribute passed through.
Migrating to Ant Design
Not codemod-covered: AntD's Input has no mask. A masked field needs a mask library alongside AntD's Input.
fieldStyle, revealIcons, revealStyle
fieldStyle="translucent" is a glass field for photo or dark surfaces (--rebar-auth-field-* tokens). revealIcons={{ show, hide }} swaps the eye glyphs and revealStyle="plain" makes the eye a bare 70% glyph inset by --rebar-input-reveal-inset.