SusTextfield

Single-line text input with label, variants, and clear / prepend / append affordances.

Package

SusKit · Atoms (commercial)

Open in Playground

SusKit · Atoms

Props

Name	Type	Default
Model	Prop<string>	""	v-model
Label	Prop<string>	""	v-model
Variant	Prop<string>	"filled"	v-model
Placeholder	Prop<string>	""	v-model
Prefix	Prop<string>	""	v-model
Suffix	Prop<string>	""	v-model
PrependIcon	Prop<string>	""	v-model
PrependInnerIcon	Prop<string>	""	v-model
AppendIcon	Prop<string>	""	v-model
AppendInnerIcon	Prop<string>	""	v-model
Clearable	Prop<bool>	false	v-model
PersistentClear	Prop<bool>	false	v-model
ClearIcon	Prop<string>	"x"	v-model
MaxLength	Prop<int>	0	v-model
Counter	Prop<bool>	false	v-model
Disabled	Prop<bool>	false	v-model
Readonly	Prop<bool>	false	v-model
Multiline	Prop<bool>	false	v-model
Rows	Prop<int>	1	v-model
MaxRows	Prop<int>	0	v-model
AutoGrow	Prop<bool>	false	v-model
NoResize	Prop<bool>	false	v-model
Density	Prop<string>	"default"	v-model
Error	Prop<string>	""	v-model
Hint	Prop<string>	""	v-model
PersistentHint	Prop<bool>	false	v-model
HideDetails	Prop<string>	"auto"	v-model
Focused	Prop<bool>	false	v-model
Resizable	Prop<bool>	true	v-model
Password	Prop<bool>	false	v-model
Color	Prop<string>	"primary"	v-model
BaseColor	Prop<string>	""	v-model
BgColor	Prop<string>	""	v-model
Loading	Prop<bool>	false	v-model
Flat	Prop<bool>	false	v-model
Rounded	Prop<string>	""	v-model
Tile	Prop<bool>	false	v-model
CenterAffix	Prop<bool>	false	v-model
Dirty	Prop<bool>	false	v-model
SingleLine	Prop<bool>	false	v-model

Slots

Name
prepend
append

Events

Name	Field	Payload
Change	OnChange	string
FocusEvent	OnFocusEvent	—
BlurEvent	OnBlurEvent	—

Style hooks

USS class contract — override appearance without touching C#. States toggle via these classes:

• keyboard-focus
• sus-hidden
• sus-textfield
• sus-textfield__append-icon
• sus-textfield__append-icon--has-icon
• sus-textfield__append-inner-icon
• sus-textfield__append-inner-icon--has-icon
• sus-textfield__clear
• sus-textfield__clear--visible
• sus-textfield__control
• sus-textfield__counter
• sus-textfield__details
• sus-textfield__details--hidden
• sus-textfield__error
• sus-textfield__field
• sus-textfield__field-area
• sus-textfield__hint
• sus-textfield__icon
• sus-textfield__input
• sus-textfield__input--multiline
• sus-textfield__input-row
• sus-textfield__label
• sus-textfield__label--active
• sus-textfield__label--floating
• sus-textfield__loader
• sus-textfield__loader--active
• sus-textfield__messages
• sus-textfield__placeholder
• sus-textfield__prefix
• sus-textfield__prepend-icon
• sus-textfield__prepend-icon--has-icon
• sus-textfield__prepend-inner-icon
• sus-textfield__prepend-inner-icon--has-icon
• sus-textfield__resize
• sus-textfield__resize--active
• sus-textfield__suffix
• sus-textfield__underline
• sus-textfield--auto-grow
• sus-textfield--center-affix
• sus-textfield--density-comfortable
• sus-textfield--density-compact
• sus-textfield--dirty
• sus-textfield--disabled
• sus-textfield--error
• sus-textfield--filled
• sus-textfield--flat
• sus-textfield--focused
• sus-textfield--has-label
• sus-textfield--has-value
• sus-textfield--hide-details
• sus-textfield--loading
• sus-textfield--multiline
• sus-textfield--no-resize
• sus-textfield--outlined
• sus-textfield--plain
• sus-textfield--readonly
• sus-textfield--rounded-0
• sus-textfield--rounded-circle
• sus-textfield--rounded-lg
• sus-textfield--rounded-pill
• sus-textfield--rounded-sm
• sus-textfield--rounded-xl
• sus-textfield--rounded-xs
• sus-textfield--single-line
• sus-textfield--solo
• sus-textfield--solo-filled
• sus-textfield--solo-inverted
• sus-textfield--textarea
• sus-textfield--tile
• sus-textfield--underlined
• unity-base-text-field
• unity-base-text-field__input
• unity-base-text-field__input--placeholder
• unity-base-text-field__placeholder
• unity-base-text-field__text-element
• unity-label
• unity-text-element
• unity-text-field
• unity-text-field__label
• unity-text-field__placeholder

Usage

<template>
  <sus:SusTextfield Label="Email"
                    Variant="outlined"
                    :Model="Email.Value"
                    Placeholder="you@example.com"
                    Clearable="true"
                    PrependInnerIcon="envelope"
                    @change="OnEmail" />
</template>

<script>
public Prop<string> Email = new("");
void OnEmail(string value) { /* … */ }
</script>

var field = new SusTextfield();
field.Label.Value = "Display name";
field.Variant.Value = "filled";
field.Model.Value = "";
field.MaxLength.Value = 32;
field.Counter.Value = true;
field.OnChange += value => { /* … */ };

Variant

filled · outlined · underlined · plain · solo · solo-inverted · solo-filled

Notes

• Password masks input; Multiline + Rows / AutoGrow for longer text.
• Error / Hint / HideDetails follow the shared form-field pattern.
• HideDetails = "true" removes the message strip under the field: the root gets sus-textfield--hide-details (padding-bottom: 0) and the empty details block (sus-textfield__details--hidden) leaves the layout. "auto" (default) keeps the reserved strip when there is no message, so the layout does not jump when one appears. Use "true" for a search field in a toolbar or a filter row.
• SusSelect differs on "auto". Its "true" works the same way (root class sus-select--hide-details, padding-bottom: 0), and "auto" is its default too. But on SusSelect, "auto" collapses the strip while Error is empty: no space is reserved and the hint is not shown. The strip comes back when an error is set, so the field grows at that moment. Set HideDetails = "false" on a SusSelect that must keep its height or show a hint.