Site settings
Change the appearance of the site to suit your preferences
PasswordInput
The PasswordInput component is designed to securely collect password information from users. It features built-in security measures and user-friendly enhancements to ensure both safety and ease of use. This component is an essential part of any form where sensitive data is required.
A basic
<PasswordInput label="Password" />
With icon on the left
<PasswordInput label="Train password" startElement={<TrainOutline24Icon />} />
Controlled field with validation
() => { const [password, setPassword] = React.useState(""); return ( <PasswordInput label="Password" value={password} invalid={password !== "Tut tut"} errorText="Wrong password!" onChange={e => setPassword(e.target.value)} /> ); }
Different variants
<Stack gap={3}> <PasswordInput label="Core" /> <PasswordInput label="Floating" variant="floating" /> </Stack>