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.

pending

        
            <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.

primary red yellow green blue pink cyan orange gray purple violet indigo fuchsia

        
            <x-bladewind::tag label="pending" color="color-name" />

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

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"

primary red yellow green blue pink cyan orange gray purple violet indigo fuchsia

        
            <x-bladewind::tag label="pending" shade="dark" color="color-name" />

        
            <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.

pending pending

        
            <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"

marketing accounting

        
            <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)" />

Tiny Tags

Sometimes you need to display tags as hints. For example in a menu bar you may want users to know which features are new by displaying a colourful but tiny new tag next to each new menu item. Setting the tiny="true" attribute will serve such aa purpose. Specifying this attribute on a x-bladewind::tags component will apply the size to all tags defined within the component. However, specifying the attribute on a x-bladewind::tag component will only apply it to that single tag.

just added new

        
            <x-bladewind::tag label="just added" tiny="true" color="pink" />

        <x-bladewind::tag label="new" tiny="true" color="purple"
            shade="dark"
            uppercasing="false"/>

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".

pending pending

        
            <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.

pending pending

        
            <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?

laravel javascript node js tailwindcss c-sharp

        
            <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 js" />
                <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?

digital ocean amazon web services microsoft azure google cloud

        
            <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?

artificial intelligence blockchain cryptocurrency software engineering

        
            <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?

Male female other don't ask

        
            <x-bladewind::tags
                color="blue"
                name="gender"
                max="1"
                rounded="true"
                class="space-x-2"
                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.

hangout with friends go clubbing watch movies just chill sleeeeep

        
            <x-bladewind::tags
                color="red"
                name="fridays"
                class="space-x-2"
                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`
tiny	false	Determines if the size of all the tags in the group is tiny. There are just two sizes, tiny and regular. `true` `false`
uppercasing	true	Determines if the text for all the tags in the group is uppercased. If `false`, the text text will be displayed as you entered it. `true` `false`
shade	faint	Determines if the tags should have a faint or darker color shade. `faint` `dark`
outline	false	Determines if the tag is only outlined with `color` above. Outline tags have no background colour. `true` `false`
class	space-x-2 space-y-2	Any additional CSS you wish to add to the tags container. Useful if you want to space out the tags for example. Whatever you set overwrites the default so you may need to include classes for spacing.

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`
tiny	false	Determines if the tag size is tiny. There are just tiny and the regular size. `true` `false`
uppercasing	true	Determines if the tag text is all uppercase. If `false`, the text text will be displayed as you entered it. `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"
                tiny="false"
                uppercasing="false"
                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"
                tiny="false"
                uppercasing="false"
                onclick="alert('you clicked on '+ dom_el('.a1002').innerText)" />

The source file for this component is available in resources > views > components > bladewind > tag-group.blade.php, resources > views > components > bladewind > tag.blade.php