Number

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

                
                    <x-bladewind::number  />
                
            

                
                    <x-bladewind::number step="10"  />
                
            

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.

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.

 

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"
    step="10"
    with_dots="false"
    selected_value="12" />