mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 05:06:55 +04:00
29 lines
1.2 KiB
Plaintext
29 lines
1.2 KiB
Plaintext
---
|
|
// Password strength meter in its natural place: the password field of a sign-up
|
|
// card. The field carries a value, so tabler.js rates it on load and the meter
|
|
// shows a filled state with its label instead of an empty bar.
|
|
import ScreenshotLayout from '../layouts/ScreenshotLayout.astro'
|
|
import Card from '@ui/Card.astro'
|
|
import CardBody from '@ui/CardBody.astro'
|
|
import CardTitle from '@ui/CardTitle.astro'
|
|
import FormGroup from '@ui/FormGroup.astro'
|
|
import Strength from '@ui/Strength.astro'
|
|
import Button from '@ui/Button.astro'
|
|
---
|
|
|
|
<ScreenshotLayout title="Password strength" columns={1.6}>
|
|
<Card>
|
|
<CardBody class="p-4">
|
|
<CardTitle>Create your account</CardTitle>
|
|
<FormGroup label="Email address" for="shot-email">
|
|
<input type="email" id="shot-email" class="form-control" value="paweł@tabler.io" autocomplete="email" />
|
|
</FormGroup>
|
|
<FormGroup label="Password" for="shot-password" class="mb-4">
|
|
<input type="password" id="shot-password" class="form-control" value="Tabler2026!" autocomplete="new-password" />
|
|
<Strength>Use 8 to 20 characters, with letters and numbers.</Strength>
|
|
</FormGroup>
|
|
<Button text="Create account" color="primary" block />
|
|
</CardBody>
|
|
</Card>
|
|
</ScreenshotLayout>
|