TagInput

TagInput

A multi-value input widget with removable tags. Users type text and press Enter or comma to add a tag. Tags appear as rounded pills with an optional X button for removal. Lives in aurora_widgets::components::tag_input.

Builder API

TagInput::new()
    .tags(vec!["Rust", "Aurora", "UI"])
    .placeholder("Add tag...")
    .max_tags(10)
    .removable(true)
    .width(400.0)
    .on_change(|tags| println!("{tags:?}"))

Methods

.tags(tags)

Sets the initial list of tags.

TagInput::new().tags(vec!["Rust", "Aurora", "UI"])

.placeholder(text)

Sets the placeholder text shown when there are no tags and no input text. Defaults to "Add tag...".

TagInput::new().placeholder("Add framework...")

.max_tags(n)

Limits the maximum number of tags. When the limit is reached, new tags cannot be added.

TagInput::new().max_tags(5)

.removable(bool)

Controls whether tags show an X button for removal. Defaults to true.

TagInput::new().removable(false)

.on_change(f)

Sets the callback fired whenever tags are added or removed. Receives the current tag list as &[String].

TagInput::new().on_change(|tags| {
    println!("tags changed: {tags:?}");
})

.width(w)

Sets a fixed width for the widget. Without this, the widget fills available space.

TagInput::new().width(400.0)

.error(bool)

Enables or disables the error state (red border).

TagInput::new().error(true)

Properties

Property	Type	Default	Description
tags	Vec<String>	[]	Current list of tags
input_text	String	""	Text being typed
placeholder	String	"Add tag..."	Placeholder text
max_tags	Option<usize>	None	Maximum number of tags
removable	bool	true	Whether tags can be removed
width	Option<f32>	None	Fixed width
min_height	f32	40.0	Minimum widget height
tag_height	f32	26.0	Height of each tag pill
tag_spacing	f32	6.0	Spacing between tags
tag_color	Color	primary()	Tag pill background color
tag_text_color	Color	primary_foreground()	Tag label color
background	Color	background()	Widget background color
border_color	Color	input_border()	Border color
corners	Corners	6.0 all	Corner radii
padding	Edges	6, 8, 6, 8	Inner padding
error	bool	false	Error state

Keyboard Interaction

Key	Action
Enter	Add current input as a tag
, (comma)	Add current input as a tag
Backspace	Remove last character; if empty, remove last tag
Escape	Clear input and unfocus

Behavior

• Duplicate prevention: Tags are compared case-insensitively. Attempting to add a duplicate is silently ignored.
• Whitespace trimming: Leading and trailing whitespace is trimmed before adding.
• Empty input: Empty or whitespace-only input is not added as a tag.
• Flow layout: Tags wrap to the next line when they exceed the available width.

Full Example

use aurora_ui::prelude::*;
use aurora_ui::aurora_widgets::components::tag_input;

fn main() {
    App::new()
        .title("Tag Input Example")
        .run(|window, _frame_info| {
            window.root(
                col!()
                    .spacing(16.0)
                    .padding(Edges::all(24.0))
                    .child(
                        tag_input::TagInput::new()
                            .tags(vec!["Rust", "Aurora", "UI"])
                            .placeholder("Add tag...")
                            .max_tags(10)
                            .width(400.0)
                            .on_change(|tags| println!("{tags:?}")),
                    ),
            );
        })
        .expect("Failed to run app");
}