<PrimerBrandTextInput Placeholder="Enter text here..." /><PrimerStack Direction="StackDirection.Column" Gap="StackGap.Gap8">
<PrimerBrandTextInput Type="text" Placeholder="Text" />
<PrimerBrandTextInput Type="number" Placeholder="123" />
<PrimerBrandTextInput Type="email" Placeholder="your@email.com" />
<PrimerBrandTextInput Type="password" Placeholder="Password" />
<PrimerBrandTextInput Type="date" />
<PrimerBrandTextInput Type="url" Placeholder="https://..." />
</PrimerStack><PrimerStack Direction="StackDirection.Column" Gap="StackGap.Gap8">
<PrimerBrandTextInput Size="BrandInputSize.Small" Placeholder="Small" />
<PrimerBrandTextInput Size="BrandInputSize.Medium" Placeholder="Medium" />
<PrimerBrandTextInput Size="BrandInputSize.Large" Placeholder="Large" />
</PrimerStack><PrimerBrandTextInput FullWidth Placeholder="Full width input" /><PrimerBrandTextInput Placeholder="Search...">
<LeadingVisual>
<PrimerBrandIcon Icon="BrandIconName.Search16" Size="BrandIconSize.Xsmall" />
</LeadingVisual>
</PrimerBrandTextInput>Available options for PrimerBrandTextInput
| Name | Description | Default Value | CSS Class |
|---|---|---|---|
Value | Two-way bound value | null | - |
Type | HTML input type | text | - |
Placeholder | Input placeholder text | null | - |
Size | Input size (Small, Medium, Large) | Medium | TextInput--{size} |
FullWidth | Expands input to 100% width | false | TextInput--fullWidth |
IsInvalid | Marks input as invalid | false | TextInput-wrapper--error |
IsValid | Marks input as valid | false | TextInput-wrapper--success |
Disabled | Disables the input | false | TextInput[disabled] |
Label | Optional label for the input | null | FormControl-label |
LeadingVisual | Icon or element to the left | null | TextInput-leading-visual |
TrailingVisual | Icon or element to the right | null | TextInput-trailing-visual |
AutoComplete | Autocomplete attribute | null | - |
LeadingText | Static prefix text rendered inside the input on the left | null | TextInput--has-leading-text |