File tree Expand file tree Collapse file tree 1 file changed +2
-1
lines changed Expand file tree Collapse file tree 1 file changed +2
-1
lines changed Original file line number Diff line number Diff line change @@ -38,6 +38,7 @@ Use this example with an icon and helper text to set a ZIP code value inside a f
38
38
<script lang="ts">
39
39
import { Input, Label, P } from "flowbite-svelte";
40
40
import { MapPinAltSolid } from "flowbite-svelte-icons";
41
+ const zipPattern = "^\\d{5}(-\\d{4})?$";
41
42
</script>
42
43
43
44
<form class="max-w-sm mx-auto">
@@ -46,7 +47,7 @@ Use this example with an icon and helper text to set a ZIP code value inside a f
46
47
<div class="absolute inset-y-0 start-0 top-0 flex items-center ps-3.5 pointer-events-none">
47
48
<MapPinAltSolid />
48
49
</div>
49
- <Input type="text" pattern="^\d{5}(-\d{4})?$" title="Enter ZIP code: 12345 or 12345-6789" inputmode="numeric" placeholder="12345 or 12345-6789" class="ps-10" aria-describedby="helper-text-explanation" required />
50
+ <Input type="text" pattern={zipPattern} title="Enter ZIP code: 12345 or 12345-6789" inputmode="numeric" placeholder="12345 or 12345-6789" class="ps-10" aria-describedby="helper-text-explanation" required />
50
51
</div>
51
52
<P id="helper-text-explanation" class="mt-2 text-sm" >Enter either a standard 5-digit ZIP code or the extended ZIP+4.</P>
52
53
</form>
You can’t perform that action at this time.
0 commit comments