logo
v2.4.3
LTR RTL

Tag

Tags, sometimes referred to as labels allow you to logically group items or indicate statuses of items. You can also use tags to list selections. They are very simple to use.

        
            <x-bladewind.tag label="pending"  />
        
    

Faint Coloured

The BladewindUI tag component allows you to specify different colours. The tags by default are faint in colour with blue being the default colour. There are nine colour options to pick from.

                 

        
            <x-bladewind.tag label="pending" color="red" />

            <x-bladewind.tag label="pending" color="yellow" />

            <x-bladewind.tag label="pending" color="green" />

            <x-bladewind.tag label="pending" color="blue" />

            <x-bladewind.tag label="pending" color="pink" />

            <x-bladewind.tag label="pending" color="cyan" />

            <x-bladewind.tag label="pending" color="orange" />

            <x-bladewind.tag label="pending" color="gray" />

            <x-bladewind.tag label="pending" color="purple" />

        
    

Dark Coloured

Dark colours in this case have nothing to do with dark mode. These are just a deeper shade of the tag colours. You can get darker shaded tags by setting shade="dark"

                 

        
            <x-bladewind.tag label="pending" shade="dark" color="red" />

            <x-bladewind.tag label="pending" shade="dark" color="yellow" />

            <x-bladewind.tag label="pending" shade="dark" color="green" />

            <x-bladewind.tag label="pending" shade="dark" color="blue" />

            <x-bladewind.tag label="pending" shade="dark" color="pink" />

            <x-bladewind.tag label="pending" shade="dark" color="cyan" />

            <x-bladewind.tag label="pending" shade="dark" color="orange" />

            <x-bladewind.tag label="pending" shade="dark" color="gray" />

            <x-bladewind.tag label="pending" shade="dark" color="purple" />
        
    

With Close Icons

Tags can also have close icons. That will be useful if you use tags to display user selections and want a way to remove a user’s selection from the list. By default tags do not show the close icon. To activate close icons, set can_close="true". The default action when the close icon is clicked is to remove the tag that was clicked.

 

        
            <x-bladewind.tag label="pending"
                can_close="true" />

            <x-bladewind.tag label="pending"
                can_close="true"
                color="pink" />
        
    

The default action when the close icon is clicked is to remove the tag that was clicked. To run your own code when the close icon is clicked, provide a javascript function to the onclick attribute. You may need to use the id attribute to provide unique identifiers for your tags. By default each tag has a random generated id prefixed with bw- to prevent numeric only IDs from breaking. You can turn off the prefixing of IDs by setting add_id_prefix="false"

 

        
            <x-bladewind.tag
                label="marketing"
                can_close="true"
                add_id_prefix="false"
                id="a1001"
                onclick="alert('you clicked on '+ dom_el('#a1001').innerText)" />

            <x-bladewind.tag
                label="accounting"
                can_close="true"
                color="pink"
                class="a1002"
                onclick="alert('you clicked on '+ dom_el('.a1002').innerText)" />
        
    

Rounded Tags

There are cases where you have a rounded elements theme running through your app and will prefer to have rounded tags. Yes you can!. To make tags rounded set rounded="true".

 

        
            <x-bladewind.tag label="pending"
                rounded="true" />

            <x-bladewind.tag label="pending"
                can_close="true"
                rounded="true"
                color="pink" />
        
    

Outline Tags

What if you prefer to have no background colours on your tags. Just a border outline with your chosen colour. Simply set outline="true". The outline border colour is also affected by the shade you set. So light shades have a lighter outline. Dark shades have a darker outline.

 

        
            <x-bladewind.tag label="pending" outline="true" color="pink" />

            <x-bladewind.tag label="pending" can_close="true"
                outline="true"
                color="pink"
                shade="dark" />
        
    

Selectable Tags

Selectable tags allow you to use tags in forms. You can think of them in this case as a different kind of checkboxes. Tags automatically become selectable when you specify the name and value attributes.

By default, selectable tags use the faint colour of whatever colour you specify, and, on hover/selection display the darker shade of the specified colour.

Selectable tags can also not be closed. can_close="false"

Hidden input fields are created for distinct tag names. Values of the selected tags are then written the hidden input fields making them accessible when the form is submitted. For example: if we have 3 tags with the name location, this input field will be created <input type="hidden" name="location" />. When any location is selected, the value will be written into the hidden location input field. Multiple values are written as a comma separated list.

What's in your tech stack?

        
            <x-bladewind::tags
                color="orange"
                name="stack"
                required="true"
                max="3"
                error_message="You can select only up to 3 tech stacks"
                error_heading="Check selection!">

                <x-bladewind::tag label="laravel" value="laravel" />
                <x-bladewind::tag label="javascript" value="js" />
                <x-bladewind::tag label="node js" value="node" />
                <x-bladewind::tag label="tailwindcss" value="tailwind" />
                <x-bladewind::tag label="c-sharp" value="cs" />

            </x-bladewind::tags>
        
    

Note the tags are wrapped in a parent <x-bladewind::tags>...</x-bladewind::tags> component. The above example also introduces a restriction on how many tags can be selected from the list. This is achieved by setting the max attribute on the tags component. Where a max attribute is used, it is necessary to define the error_message and error_heading attributes. This is the message to be displayed if a user tries to select more than the maximum tags allowed.

You will need to have <x-bladewind::notification /> on the page for error messages to be displayed.

Where are you hosting apps?

        
            <x-bladewind::tags color="green" name="host">
                <x-bladewind::tag label="digital ocean" value="do" />
                <x-bladewind::tag label="amazon web services" value="aws" />
                <x-bladewind::tag label="microsoft azure" value="azure" />
                <x-bladewind::tag label="google cloud" value="google" />
            </x-bladewind::tags>
        
    

What are your interests?

        
            <x-bladewind::tags color="gray" name="interests">
                <x-bladewind::tag label="artificial intelligence" value="AI" />
                <x-bladewind::tag label="blockchain" value="blockchain" />
                <x-bladewind::tag label="cryptocurrency" value="crypto" />
                <x-bladewind::tag label="software engineering" value="software" />
            </x-bladewind::tags>
        
    

What is your gender?

        
            <x-bladewind::tags
                color="blue"
                name="gender"
                max="1"
                rounded="true"
                error_message="You can select just one gender"
                error_heading="Yoh!">

                <x-bladewind::tag label="Male" value="male" />
                <x-bladewind::tag label="female" value="female" />
                <x-bladewind::tag label="other" value="other" />
                <x-bladewind::tag label="don't ask" value="shoosh" />

            </x-bladewind::tags>
        
    

What do you do on friday evenings?
The example below has three values selected by default.

        
            <x-bladewind::tags
                color="red"
                name="fridays"
                selected_value="hangout,club,sleep">

                <x-bladewind::tag label="hangout with friends" value="hangout" />
                <x-bladewind::tag label="go clubbing" value="club" />
                <x-bladewind::tag label="watch movies" value="movies" />
                <x-bladewind::tag label="just chill" value="chill" />
                <x-bladewind::tag label="sleeeeep" value="sleep" />

            </x-bladewind::tags>
        
    

Full List Of Attributes

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

IMPORTANT: Projects running Laravel 8 please read this

Tags Component

Only used when defining selectable tags.

Option Default Available Values
name null The name used when defining selectable tags. This name can be retrieved when the form is submitted.
color blue There are nine colors to choose from.

red yellow green blue pink cyan purple gray orange
max null How many tags can be selected. By default there is no limit.

any positive number
required false Determines if selectable tags are required when displayed in a form.

true false
selected_value empty string In edit mode you will want selected tags to be highlighted by default. Set the values as a comma separated list.
error_heading Error Heading to display in the notification when displaying an error message.
error_message empty string Message to display when max is set and user selection exceeds the max allowed.
rounded false Determines if the tag is fully rounded or not. By default tags have a very subtle roundness.

true false

Tag Component

Option Default Available Values
label blank The text to display on the tag.
color blue There are nine colors to choose from.

red yellow green blue pink cyan purple gray orange
shade faint Determines if the tags should have a faint or darker color shade.

faint dark
can_close false Determines if the tag should display a close icon or not. The value should be passed as a string, not boolean.

true false
id uniqid() Unique id for the tag. This id can then be accessed via javascript. By default tag IDs have a prefix of bw-
add_id_prefix true Determines if the bw- prefix should be added to tag IDs.
true false
rounded false Determines if the tag is fully rounded or not. By default tags have a very subtle roundness.

true false
outline false Determines if the tag is only outlined with color above. Outline tags have no background colour.

true false
onclick blank Javascript function to execute when the close icon is clicked.
class bw-tag Any additional CSS you wish to add.

Tags with all attributes defined

        
            <x-bladewind.tags
                name="stack"
                color="orange"
                required="true"
                rounded="true"
                max="3"
                selected_value="laravel,js"
                error_message="You can select only up to 3 tech stacks"
                error_heading="Check selection!">
        
    

Tag with all attributes defined

        
            <x-bladewind.tag
                label="accounting"
                can_close="true"
                color="pink"
                class="a1002"
                id="a1002"
                rounded="true"
                outline="true"
                add_id_prefix="false"
                shade="dark"
                onclick="alert('you clicked on '+ dom_el('.a1002').innerText)" />
        
    
The source file for this component is available in resources > views > components > bladewind > tag.blade.php