Hex doc
Phoenix
Semantic
Use class="ui-{role}" to set the semantic palette of a tags input.
Available options: accent, alert, brand, info, success
lorem
duis
donec
lorem
duis
donec
lorem
duis
donec
lorem
duis
donec
lorem
duis
donec
lorem
duis
donec
<.tags_input class="tags-input w-full" value={["lorem", "duis", "donec"]}>
<:close><.heroicon name="hero-x-mark" /></:close>
</.tags_input>
<.tags_input class="tags-input w-full ui-accent" value={["lorem", "duis", "donec"]}>
<:close><.heroicon name="hero-x-mark" /></:close>
</.tags_input>
<.tags_input class="tags-input w-full ui-brand" value={["lorem", "duis", "donec"]}>
<:close><.heroicon name="hero-x-mark" /></:close>
</.tags_input>
<.tags_input class="tags-input w-full ui-alert" value={["lorem", "duis", "donec"]}>
<:close><.heroicon name="hero-x-mark" /></:close>
</.tags_input>
<.tags_input class="tags-input w-full ui-success" value={["lorem", "duis", "donec"]}>
<:close><.heroicon name="hero-x-mark" /></:close>
</.tags_input>
<.tags_input class="tags-input w-full ui-info" value={["lorem", "duis", "donec"]}>
<:close><.heroicon name="hero-x-mark" /></:close>
</.tags_input>
Delete trigger
lorem
duis
donec
<.tags_input class="tags-input w-full" value={["lorem", "duis", "donec"]}>
<:close><.heroicon name="hero-x-mark" /></:close>
</.tags_input>
Size
Use class="ui-size-{size}" to set the size of a tags input.
Available options: xs, sm, md (default), lg, xl
lorem
duis
donec
lorem
duis
donec
lorem
duis
donec
lorem
duis
donec
<.tags_input class="tags-input w-full ui-size-sm" value={["lorem", "duis", "donec"]}>
<:close><.heroicon name="hero-x-mark" /></:close>
</.tags_input>
<.tags_input class="tags-input w-full ui-size-md" value={["lorem", "duis", "donec"]}>
<:close><.heroicon name="hero-x-mark" /></:close>
</.tags_input>
<.tags_input class="tags-input w-full ui-size-lg" value={["lorem", "duis", "donec"]}>
<:close><.heroicon name="hero-x-mark" /></:close>
</.tags_input>
<.tags_input class="tags-input w-full ui-size-xl" value={["lorem", "duis", "donec"]}>
<:close><.heroicon name="hero-x-mark" /></:close>
</.tags_input>
Rounded
Use class="ui-rounded-{step}" to set the corner radius of a tags input.
Available options: none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, full (default)
lorem
duis
donec
lorem
duis
donec
lorem
duis
donec
lorem
duis
donec
lorem
duis
donec
<.tags_input class="tags-input w-full ui-rounded-none" value={["lorem", "duis", "donec"]}>
<:close><.heroicon name="hero-x-mark" /></:close>
</.tags_input>
<.tags_input class="tags-input w-full ui-rounded-sm" value={["lorem", "duis", "donec"]}>
<:close><.heroicon name="hero-x-mark" /></:close>
</.tags_input>
<.tags_input class="tags-input w-full ui-rounded-md" value={["lorem", "duis", "donec"]}>
<:close><.heroicon name="hero-x-mark" /></:close>
</.tags_input>
<.tags_input class="tags-input w-full ui-rounded-lg" value={["lorem", "duis", "donec"]}>
<:close><.heroicon name="hero-x-mark" /></:close>
</.tags_input>
<.tags_input class="tags-input w-full ui-rounded-xl" value={["lorem", "duis", "donec"]}>
<:close><.heroicon name="hero-x-mark" /></:close>
</.tags_input>
Max width
Without max-w-*, width comes from component CSS. Default for tags-input: 3xs (width: 100%).
Use class="max-w-{step}" to set the maximum width of a tags input root.
Available options: none, full, 9xs, 8xs, 7xs, 6xs, 5xs, 4xs, 3xs (default), 2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, 8xl, 9xl
default (3xs)
lorem
duis
donec
6xs
lorem
duis
donec
5xs
lorem
duis
donec
4xs
lorem
duis
donec
3xs
lorem
duis
donec
2xs
lorem
duis
donec
xs
lorem
duis
donec
sm
lorem
duis
donec
md
lorem
duis
donec
lg
lorem
duis
donec
xl
lorem
duis
donec
2xl
lorem
duis
donec
3xl
lorem
duis
donec
4xl
lorem
duis
donec
5xl
lorem
duis
donec
6xl
lorem
duis
donec
7xl
lorem
duis
donec
8xl
lorem
duis
donec
9xl
lorem
duis
donec
<.tags_input class="tags-input" value={["lorem", "duis", "donec"]}>
<:close><.heroicon name="hero-x-mark" /></:close>
</.tags_input>
<.tags_input class="tags-input max-w-6xs" value={["lorem", "duis", "donec"]}>
<:close><.heroicon name="hero-x-mark" /></:close>
</.tags_input>
<.tags_input class="tags-input max-w-5xs" value={["lorem", "duis", "donec"]}>
<:close><.heroicon name="hero-x-mark" /></:close>
</.tags_input>
<.tags_input class="tags-input max-w-4xs" value={["lorem", "duis", "donec"]}>
<:close><.heroicon name="hero-x-mark" /></:close>
</.tags_input>
<.tags_input class="tags-input max-w-3xs" value={["lorem", "duis", "donec"]}>
<:close><.heroicon name="hero-x-mark" /></:close>
</.tags_input>
<.tags_input class="tags-input max-w-2xs" value={["lorem", "duis", "donec"]}>
<:close><.heroicon name="hero-x-mark" /></:close>
</.tags_input>
<.tags_input class="tags-input max-w-xs" value={["lorem", "duis", "donec"]}>
<:close><.heroicon name="hero-x-mark" /></:close>
</.tags_input>
<.tags_input class="tags-input max-w-sm" value={["lorem", "duis", "donec"]}>
<:close><.heroicon name="hero-x-mark" /></:close>
</.tags_input>
<.tags_input class="tags-input max-w-md" value={["lorem", "duis", "donec"]}>
<:close><.heroicon name="hero-x-mark" /></:close>
</.tags_input>
<.tags_input class="tags-input max-w-lg" value={["lorem", "duis", "donec"]}>
<:close><.heroicon name="hero-x-mark" /></:close>
</.tags_input>
<.tags_input class="tags-input max-w-xl" value={["lorem", "duis", "donec"]}>
<:close><.heroicon name="hero-x-mark" /></:close>
</.tags_input>
<.tags_input class="tags-input max-w-2xl" value={["lorem", "duis", "donec"]}>
<:close><.heroicon name="hero-x-mark" /></:close>
</.tags_input>
<.tags_input class="tags-input max-w-3xl" value={["lorem", "duis", "donec"]}>
<:close><.heroicon name="hero-x-mark" /></:close>
</.tags_input>
<.tags_input class="tags-input max-w-4xl" value={["lorem", "duis", "donec"]}>
<:close><.heroicon name="hero-x-mark" /></:close>
</.tags_input>
<.tags_input class="tags-input max-w-5xl" value={["lorem", "duis", "donec"]}>
<:close><.heroicon name="hero-x-mark" /></:close>
</.tags_input>
<.tags_input class="tags-input max-w-6xl" value={["lorem", "duis", "donec"]}>
<:close><.heroicon name="hero-x-mark" /></:close>
</.tags_input>
<.tags_input class="tags-input max-w-7xl" value={["lorem", "duis", "donec"]}>
<:close><.heroicon name="hero-x-mark" /></:close>
</.tags_input>
<.tags_input class="tags-input max-w-8xl" value={["lorem", "duis", "donec"]}>
<:close><.heroicon name="hero-x-mark" /></:close>
</.tags_input>
<.tags_input class="tags-input max-w-9xl" value={["lorem", "duis", "donec"]}>
<:close><.heroicon name="hero-x-mark" /></:close>
</.tags_input>