Class TwInputTheme

Namespace

TwBlazor.Configuration.Components

Assembly

TwBlazor.dll

Theme configuration for input components (TwTextfield<T> and TwSelect<T>). Override any property to customize input styles globally.

[ExcludeFromCodeCoverage]
public class TwInputTheme

Inheritance

object

TwInputTheme

Inherited Members

object.GetType()

object.MemberwiseClone()

object.ToString()

object.Equals(object)

object.Equals(object, object)

object.ReferenceEquals(object, object)

object.GetHashCode()

Constructors

TwInputTheme()

public TwInputTheme()

Properties

DefaultInputVariant

Gets or sets the default input variant for text fields and selects.

public InputVariant DefaultInputVariant { get; set; }

Property Value

InputVariant

Remarks

Default is Filled. Individual components can override this setting.

DenseSize

Gets or sets the height and text size applied instead of Size when an input's Dense is enabled.

public required string DenseSize { get; set; }

Property Value

string

ErrorMessage

Gets or sets the classes for an input's validation error message, rendered by TwInputRoot.

public required string ErrorMessage { get; set; }

Property Value

string

FilledBackgroundColor

Gets or sets the filled variant background color.

public required string FilledBackgroundColor { get; set; }

Property Value

string

FilledBorder

Gets or sets the default border for filled inputs.

public required string FilledBorder { get; set; }

Property Value

string

FocusBorder

Gets or sets the focus border for inputs.

public required string FocusBorder { get; set; }

Property Value

string

InputLegendBase

Gets or sets the CSS classes applied to the input legend (group) element to define its visual styling.

public required string InputLegendBase { get; set; }

Property Value

string

LabelBase

Gets or sets the base classes for input labels.

public required string LabelBase { get; set; }

Property Value

string

OutlinedBorder

Gets or sets the default border for outlined inputs.

public required string OutlinedBorder { get; set; }

Property Value

string

SelectBase

Gets or sets the base classes applied to selects.

public required string SelectBase { get; set; }

Property Value

string

SelectDefaultPadding

Gets or sets the horizontal padding applied to a select using the Default variant, which otherwise has none of its own (unlike Filled/Outlined).

public required string SelectDefaultPadding { get; set; }

Property Value

string

SelectMultiOpenButton

Gets or sets the classes for the real, focusable <button> at the end of a multi-select's custom-popover trigger that actually opens the popover.

public required string SelectMultiOpenButton { get; set; }

Property Value

string

Remarks

Deliberately a plain <button> sibling after the selected-option chips (not a wrapping element around them) - an ARIA "button" role wrapping other focusable controls (each chip's own close button) is a nested-interactive-controls violation, since assistive tech can't reliably represent one interactive control inside another. It fills any remaining row width so most of the closed trigger's empty space is still clickable, and shows Placeholder when nothing is selected.

SelectMultiTriggerLayout

Gets or sets the layout classes applied to a multi-select's closed trigger (Multiple), on top of SelectBase.

public required string SelectMultiTriggerLayout { get; set; }

Property Value

string

Remarks

The trigger holds a wrapping row of TwChip chips (one per selected option, or the placeholder text while none are selected) rather than a single line of text the way a real <select> would, so it needs its own flex-wrap layout.

SelectNativeBackground

Gets or sets the background classes forced onto a select using the Default/Outlined variant. A native <select> popup renders using the element's own background/text colors, so a transparent one (those variants' usual background) falls back to the OS's native, often light, popup surface and can pair unreadable white dark-mode text onto it.

public required string SelectNativeBackground { get; set; }

Property Value

string

SelectNativeMultiOverlay

Gets or sets the classes applied to the real, invisible <select multiple> layered on top of a multi-select's decorative closed trigger when the native picker is in use.

public required string SelectNativeMultiOverlay { get; set; }

Property Value

string

Remarks

A native <select multiple> can't render as a closed, single-row trigger the way a single <select> can - it's always an expanded listbox. So the decorative trigger (styled like SelectBase) is what's actually seen, and this real control sits over it, fully transparent, so a tap/click still lands on genuine native form control and opens the platform's own multi-select UI (e.g. the full-screen sheet iOS/Android show for it).

SelectOption

Gets or sets the classes applied to each <option> in a select.

public required string SelectOption { get; set; }

Property Value

string

SelectPanelItemText

Gets or sets the classes that style each option row inside a multi-select popover panel so it matches the options of a single TwSelect<T>'s customizable dropdown: no visible checkbox, a leading tick and a tinted row when selected, and a hover tint.

public required string SelectPanelItemText { get; set; }

Property Value

string

Remarks

TwCheckboxGroup<TValue> is still what renders the options, so every checkbox stays a real, keyboard-focusable input; it is only visually hidden (sr-only) and the row (its label) shows the selected and focus state instead. These use arbitrary descendant selectors targeting the elements the group renders, scoped to just this popover rather than changing every standalone checkbox.

The text color uses !important to win over LabelBase's muted caption-style color, which is too low-contrast against PopoverBackground in dark mode once it is the primary, repeated content of a whole option list.

SelectPanelPosition

Gets or sets the positioning classes for a multi-select's custom checkbox-list popover panel.

public required string SelectPanelPosition { get; set; }

Property Value

string

SelectPanelSurface

Gets or sets the padding/scroll classes appended to a multi-select popover panel's surface (background/border/rounded/shadow come from PopoverBuilder.GetSurfaceClasses instead).

public required string SelectPanelSurface { get; set; }

Property Value

string

SelectReadOnlyBackground

Gets or sets the background override applied to a read-only select, suppressing its dropdown arrow background image so it doesn't imply the value can still be changed.

public required string SelectReadOnlyBackground { get; set; }

Property Value

string

Size

Gets or sets the height and text size shared by every single-line input (text fields, selects, and the date, time and color pickers built on a text field), so they all line up.

public required string Size { get; set; }

Property Value

string

Remarks

Keep the height in step with any control laid out beside inputs, such as Size.

TextfieldBase

Gets or sets the base classes applied to text fields and text areas.

public required string TextfieldBase { get; set; }

Property Value

string