Number

Display a number component that allows you to increment and decrease the number in a user-friendly way.

                
                    <x-bladewind::number  />

The Number component simply extends the BladewindUI Input component by making use of prefix and suffix icons as well as setting numeric="true". For this reason, a couple of the Input component attributes are available to the Number component.

Different Sizes

All the input component sizes are available to the number component. The up and down arrows are adjusted to match the input size. The number component sizes are also uniform with the input component sizes.

        
            <x-bladewind::number size="small" />

        
            <x-bladewind::number size="regular" />

        
            <x-bladewind::number size="medium" />

        
            <x-bladewind::number size="big" />

Button Transparency

By default the up and down buttons for increasing and decreasing the number are transparent within the Input fields. If you prefer to have them looking like proper buttons, set transparent_icons="false". This simply sets the Input component's transparent_prefix="false" and transparent_suffix="false" in the background.

        
            <x-bladewind::number transparent_icons="false" />

        
            <x-bladewind::number transparent_icons="false" size="big" />

Labels

It will make sense for users to know what it is you want them to increment or decrease. A field with no label will be quite hard to decipher. By default the number component is initialized to a selected_value="0". Setting a label in this case will move the label text to the top border of the input field.

quantity

        
            <x-bladewind::number label="quantity"  />

If you don't need to initialize your number component with a default value, you can set selected_value="" and set the label. The label will be displayed as a placeholder.

Traditional placeholders don't work in the number component.

quantity

        
            <x-bladewind::number selected_value="" label="quantity"  />

Minimum and Maximum Limits

Clicking on the up arrow will keep increasing the numbers until you get tired of clicking. You will typically not want that to happen in your UIs. There's usually a minimum and maximum limit you want your users to click within. For example, when ordering a product the minimum will be 1 and maximum will be the total number of the product available in stock.

You can achieve this by setting the min and max attributes on the component. The component handles validation and forces the user to stay within limits. If your max="12" and the user clicks on the increment icon when at 12, the value will not be incremented. Even if the user manually types any number greater than 12, the component will reset the value to the max. The same applies when a minimum value is set.

Your age

        
            <x-bladewind::number min="18" max="60" label="Your age"  />

Form Values

The name you give the component is what will be available when your form is submitted. A default random name is generated if no name is specified. Let's assume in our form the number field is named age.

When your form is submitted, you will be able to retrieve the time as shown below.

        
            $request->age;

Full List Of Attributes

The table below shows a comprehensive list of all the attributes available for the number component.

IMPORTANT: Projects running Laravel 8 please read this

Option	Default	Available Values
name	'input-'.uniqid()	This name can be accessed when the input is submitted in the form.
with_dots	true	Should decimal values be allowed. `true` `false`
selected_value	null	In edit mode, the value passed will be set as the default.
label	blank	Label to display in or above the component.
min	0	Minimum value allowed.
max	100	Maximum value allowed.
transparent_icons	true	Determines if up and down icons should be transparent or have a background colour. `true` `false`
icon_type	outline	The up and down arrows can either be outline or solid icons. `outline` `solid`
size	medium	How big should the component be either as a standalone or in relation to other form fields. `small` `regular` `small` `big`
required	false	Determines if the field should have an asterisk appended to it or not. `true` `false`
class	blank	Any extra css to apply to the input field. Useful if for example you need more room for the numbers. You can set the width.

Number with all attributes defined


<x-bladewind::number
    name="age"
    icon_type="outline"
    required="false"
    label="Age"
    size="big"
    transparent_icons="true"
    min="18"
    max="65"
    with_dots="false"
    selected_value="12" />

The source file for this component is available in resources > views > components > bladewind > number.blade.php