Skip to content

Commit ae13dd5

Browse files
shinokadashinokada
committed
docs: number-input page
1 parent af3f73f commit ae13dd5

File tree

2 files changed

+189
-0
lines changed

2 files changed

+189
-0
lines changed

‎src/app.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,13 @@ color utility to any element that depends on these defaults.
9595
input[type="search"]::-webkit-search-cancel-button {
9696
display: none;
9797
}
98+
99+
/* remove the number input arrows for Chrome, Safari, Edge, Opera */
100+
input[type="number"]::-webkit-outer-spin-button,
101+
input[type="number"]::-webkit-inner-spin-button {
102+
-webkit-appearance: none;
103+
margin: 0;
104+
}
98105
}
99106
/*
100107
@layer components {

‎src/routes/docs/forms/number-input.md

Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
---
2+
layout: componentLayout
3+
title: Svelte Number Input - Flowbite
4+
breadcrumb_title: Svelte Number Input
5+
component_title: Number Input
6+
dir: Forms
7+
description: Use the number input component to set a numeric value inside a form field based on multiple styles, variants, and layouts that can be used in product pages, forms, and more
8+
---
9+
10+
<script>
11+
import { TableProp, TableDefaultRow, CompoAttributesViewer, GitHubCompoLinks, Seealso } from '../../utils'
12+
import { A } from '$lib'
13+
14+
const components = 'Input'
15+
const relatedLinks = ['/docs/forms/input-field','/docs/forms/floating-label', '/docs/extend/tags' ]
16+
</script>
17+
18+
The number input component can be used to introduce numeric values inside a form such as for a quantity field, a ZIP code, a phone number, your credit card number, and more.
19+
20+
## Default number input
21+
Use this component to set a number value inside a form field by applying the type="number" attribute.
22+
23+
```svelte example
24+
<script lang="ts">
25+
import { Input, Label } from "flowbite-svelte";
26+
</script>
27+
28+
<form class="max-w-sm mx-auto">
29+
<Label for="number-input">Select a number:</Label>
30+
<Input type="number" id="number-input" aria-describedby="helper-text-explanation" placeholder="90210" required/>
31+
</form>
32+
```
33+
34+
## ZIP code input
35+
Use this example with an icon and helper text to set a ZIP code value inside a form field by also applying the pattern attribute to validate the input using a regular expression for a 5 digit number.
36+
37+
```svelte example
38+
<script lang="ts">
39+
import { Input, Label, P } from "flowbite-svelte";
40+
import { MapPinAltSolid } from "flowbite-svelte-icons";
41+
</script>
42+
43+
<form class="max-w-sm mx-auto">
44+
<Label class="mb-2 text-sm" for="zip-input">ZIP code:</Label>
45+
<div class="relative">
46+
<div class="absolute inset-y-0 start-0 top-0 flex items-center ps-3.5 pointer-events-none">
47+
<MapPinAltSolid />
48+
</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+
</div>
51+
<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+
</form>
53+
```
54+
55+
## Phone number
56+
57+
Use this example to set a phone number inside a form field and a dropdown menu to select the country code.
58+
59+
```svelte example class="h-64"
60+
<script>
61+
import { PhoneInput, Label, Dropdown, DropdownItem } from "flowbite-svelte";
62+
import { ChevronDownOutline } from "flowbite-svelte-icons";
63+
import Usa from "../../utils/icons/Usa.svelte";
64+
import Germany from "../../utils/icons/Germany.svelte";
65+
import Italy from "../../utils/icons/Italy.svelte";
66+
import China from "../../utils/icons/China.svelte";
67+
</script>
68+
69+
<form class="mx-auto max-w-sm">
70+
<div class="flex items-center">
71+
<button id="states-button" class="z-10 inline-flex shrink-0 items-center rounded-s-lg border border-r-0 border-gray-300 bg-gray-100 px-3 py-2 text-center text-sm font-medium text-gray-500 hover:bg-gray-200 focus:ring-4 focus:ring-gray-100 focus:outline-hidden dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-700" type="button">
72+
<Usa />
73+
+1
74+
<ChevronDownOutline class="ms-2 h-6 w-6" />
75+
</button>
76+
<Dropdown simple triggeredBy="#states-button">
77+
<DropdownItem class="flex items-center">
78+
<Usa />
79+
United States (+1)
80+
</DropdownItem>
81+
<DropdownItem class="flex items-center">
82+
<Germany />
83+
Germany (+49)
84+
</DropdownItem>
85+
<DropdownItem class="flex items-center">
86+
<Italy />
87+
Italy (+39)
88+
</DropdownItem>
89+
<DropdownItem class="flex items-center">
90+
<China />
91+
China (+86)
92+
</DropdownItem>
93+
</Dropdown>
94+
<Label for="phone-input" class="sr-only">Phone number:</Label>
95+
<div class="relative w-full">
96+
<PhoneInput phoneIcon={false} placeholder="123-456-7890" required phoneType="countryCode" />
97+
</div>
98+
</div>
99+
</form>
100+
```
101+
102+
## Control buttons
103+
Use this example with control buttons to increment and decrement the value inside the input field.
104+
105+
```svelte example
106+
<script lang="ts">
107+
import { Input, Label, P, Button, ButtonGroup } from "flowbite-svelte";
108+
import { PlusOutline, MinusOutline } from "flowbite-svelte-icons";
109+
let quantity: number = $state(12345);
110+
</script>
111+
112+
<form class="mx-auto max-w-xs">
113+
<Label class="mb-2 text-sm" for="quantity-input">Choose quantity:</Label>
114+
<div class="relative flex max-w-[8rem] items-center">
115+
<ButtonGroup>
116+
<Button type="button" id="decrement-button" onclick={() => (quantity -= 1)}>
117+
<MinusOutline />
118+
</Button>
119+
<Input bind:value={quantity} type="number" id="quantity-input" aria-describedby="helper-text-explanation" placeholder="999" required class="w-20" />
120+
<Button type="button" id="increment-button" onclick={() => (quantity += 1)}>
121+
<PlusOutline />
122+
</Button>
123+
</ButtonGroup>
124+
</div>
125+
<P id="helper-text-explanation" class="mt-2 text-sm">Please select a 5 digit number from 0 to 9.</P>
126+
</form>
127+
```
128+
129+
## Control buttons with icon
130+
Use this example to also add an icon inside the input field to improve the user experience.
131+
132+
```svelte example
133+
<script lang="ts">
134+
import { Input, Label, P, Button, ButtonGroup } from "flowbite-svelte";
135+
import { PlusOutline, MinusOutline, HomeOutline } from "flowbite-svelte-icons";
136+
let bedroom: number = $state(3);
137+
</script>
138+
139+
<form class="mx-auto max-w-xs">
140+
<Label class="mb-2 text-sm" for="quantity-input">Choose quantity:</Label>
141+
<div class="relative flex max-w-[11rem] items-center">
142+
<ButtonGroup>
143+
<Button type="button" id="decrement-button" onclick={() => (bedroom -= 1)} class="h-11 p-3">
144+
<MinusOutline />
145+
</Button>
146+
<Input min="1" max="5" bind:value={bedroom} type="number" id="quantity-input" aria-describedby="helper-text-explanation" placeholder=" " required class="h-11 w-28 pb-6 text-center" />
147+
<div class="absolute start-1/2 bottom-0 flex -translate-x-1/2 items-center space-x-1 text-xs text-gray-400 rtl:translate-x-1/2 rtl:space-x-reverse">
148+
<HomeOutline class="h-4 w-4" />
149+
<span>Bedrooms</span>
150+
</div>
151+
<Button type="button" id="increment-button" onclick={() => (bedroom += 1)} class="h-11 p-3">
152+
<PlusOutline />
153+
</Button>
154+
</ButtonGroup>
155+
</div>
156+
<P id="helper-text-explanation" class="mt-2 text-sm">Please select the number of bedrooms.</P>
157+
</form>
158+
```
159+
160+
## Counter input
161+
Use this example as an alternative style to the control buttons example above.
162+
163+
```svelte example
164+
<script lang="ts">
165+
import { Input, Label, Button, ButtonGroup } from "flowbite-svelte";
166+
import { PlusOutline, MinusOutline } from "flowbite-svelte-icons";
167+
let counterInput: number = $state(12);
168+
</script>
169+
170+
<form class="mx-auto max-w-xs">
171+
<Label for="counter-input" class="mb-1 block text-sm font-medium text-gray-900 dark:text-white">Choose quantity:</Label>
172+
<div class="relative flex items-center">
173+
<Button color="alternative" id="decrement-button" class="m-0 h-5 w-5 p-4" onclick={() => (counterInput -= 1)}>
174+
<MinusOutline class="h-2.5 w-2.5" />
175+
</Button>
176+
<Input type="number" id="counter-input" class="m-0 w-0 w-12 shrink-0 border-0 bg-transparent p-0 text-center text-sm font-normal text-gray-900 focus:ring-0 focus:outline-none dark:text-white" placeholder="" bind:value={counterInput} required />
177+
<Button color="alternative" id="increment-button" class="h-5 w-5 p-4" onclick={() => (counterInput += 1)}>
178+
<PlusOutline class="h-2.5 w-2.5" />
179+
</Button>
180+
</div>
181+
</form>
182+
```

0 commit comments

Comments
 (0)