useMaskedInput
Keep controlled inputs in sync with formatted masks while exposing the unmasked value and completion status.
Apply a phone-number mask and show both masked and raw values while users type.
Loading demo…
import { Badge, Block, Input, Text, useMaskedInput } from '@plocks/ui';
export function Demo() {
const { value, unmaskedValue, isComplete, handleChangeText, handleSelectionChange } = useMaskedInput({
mask: { mask: '(000) 000-0000', placeholderChar: '_' }
});
return (
<Block align="flex-start" maw={360} fullWidth>
<Input
label="Phone number"
placeholder="(555) 555-1234"
value={value}
onChangeText={handleChangeText}
textInputProps={{
keyboardType: 'number-pad',
onSelectionChange: event => handleSelectionChange(event.nativeEvent.selection)
}}
/>
<Badge variant="subtle" c={isComplete ? 'success' : 'gray'}>
{isComplete ? 'Mask complete' : 'Enter all digits'}
</Badge>
<Text size="xs" c="muted">Raw value: {unmaskedValue || '—'}</Text>
</Block>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources