You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: blazor/textbox/accessibility.md
+15-17Lines changed: 15 additions & 17 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,32 +9,30 @@ documentation: ug
9
9
10
10
# Accessibility in Blazor TextBox Component
11
11
12
-
The [Blazor TextBox](https://www.syncfusion.com/blazor-components/blazor-textbox)component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
12
+
The [Blazor TextBox](https://www.syncfusion.com/blazor-components/blazor-textbox)follows accessibility guidelines and standards commonly used to evaluate UI accessibility, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/), and [WAI‑ARIA](https://www.w3.org/TR/wai-aria/).
13
13
14
14
The accessibility compliance for the Blazor TextBox component is outlined below.
<div><imgsrc="https://cdn.syncfusion.com/content/images/documentation/full.png"alt="Yes"> - All features of the component meet the requirement.</div>
34
-
35
-
<div><imgsrc="https://cdn.syncfusion.com/content/images/documentation/partial.png"alt="Intermediate"> - Some features of the component do not meet the requirement.</div>
36
-
37
-
<div><imgsrc="https://cdn.syncfusion.com/content/images/documentation/not-supported.png"alt="No"> - The component does not meet the requirement.</div>
33
+
<div><imgsrc="https://cdn.syncfusion.com/content/images/documentation/full.png"alt="Meets requirement"> - All features of the component meet the requirement.</div>
34
+
<div><imgsrc="https://cdn.syncfusion.com/content/images/documentation/partial.png"alt="Partially meets requirement"> - Some features of the component do not meet the requirement.</div>
35
+
<div><imgsrc="https://cdn.syncfusion.com/content/images/documentation/not-supported.png"alt="Not supported"> - The component does not meet the requirement.</div>
38
36
39
37
## WAI-ARIA attributes
40
38
@@ -49,10 +47,10 @@ The TextBox uses the `textbox` role and following ARIA properties for its elemen
49
47
50
48
## Ensuring accessibility
51
49
52
-
The Blazor TextBox component's accessibility levels are ensured through an [axe-core](https://www.npmjs.com/package/axe-core) software tool during automated testing.
50
+
The Blazor TextBox component’s accessibility is validated with the [axe-core](https://www.npmjs.com/package/axe-core) tool during automated testing.
53
51
54
-
The accessibility compliance of the TextBox component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/textbox) in a new window to evaluate the accessibility of the Textbox component with accessibility tools.
52
+
The accessibility compliance of the TextBox component is demonstrated in the following sample. Open the [accessibility sample for TextBox](https://blazor.syncfusion.com/accessibility/textbox) in a new window to evaluate accessibility with your preferred tools. The component also supports right-to-left (RTL) rendering and high-contrast themes for improved readability and usability.
55
53
56
54
## See also
57
55
58
-
*[Accessibility in Syncfusion<supstyle="font-size:70%">®</sup> components](../common/accessibility)
56
+
-[Accessibility in Syncfusion<supstyle="font-size:70%">®</sup> components](../common/accessibility)
Copy file name to clipboardExpand all lines: blazor/textbox/data-binding.md
+9-10Lines changed: 9 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,16 +9,16 @@ documentation: ug
9
9
10
10
# Data Binding in Blazor TextBox Component
11
11
12
-
This section briefly explains how to bind the value to the TextBox component in the following different ways.
12
+
This section describes how to bind values to the TextBox component using the following approaches:
13
13
14
-
* One-way data binding
15
-
* Two-way data binding
16
-
* Dynamic value binding
17
-
* Complex data binding
14
+
- One-way data binding
15
+
- Two-way data binding
16
+
- Dynamic value binding
17
+
- Complex data binding
18
18
19
19
## One-way binding
20
20
21
-
The value can be bound to the TextBox component directly for `Value`property as mentioned in the following code example. In one-way binding, pass the property or variable name along with `@` (For Ex: "@Name").
21
+
Bind a value to the TextBox by assigning a property to the `Value` parameter. In one-way binding, pass the property or variable name with `@` (for example, `@Name`). UI updates occur when the bound property changes during a render (for example, inside an event handler).
22
22
23
23
```cshtml
24
24
@using Syncfusion.Blazor.Inputs
@@ -40,7 +40,7 @@ public string Name { get; set; } = "Hello, World!";
40
40
41
41
## Two-way data binding
42
42
43
-
Two-way binding can be achieved by using `bind-Value` attribute and its support string, int, Enum, DateTime, and bool types. If the component value has been changed, it will affect all places where you bind the variable for the **bind-value** attribute.
43
+
Use the `@bind-Value` attribute for two-way binding. Supported types include `string`, `int`, `enum`, `DateTime`, and `bool`. When the component value changes, the bound variable is updated, and vice versa.
44
44
45
45
```cshtml
46
46
@using Syncfusion.Blazor.Inputs
@@ -58,9 +58,8 @@ public string Name { get; set; } = "Syncfusion";
58
58
59
59
## Dynamic value binding
60
60
61
-
The property value can be changed dynamically by manually calling the `StateHasChanged()`method inside public event of **Blazor TextBox component** only. This method notifies the component that its state has changed and queues a re-render.
61
+
The component can update styles or other parameters dynamically in response to events. Calling `StateHasChanged()`notifies the component to re-render; event callbacks typically trigger re-render automatically, so this call may be optional depending on the scenario.
62
62
63
-
There is no need to call this method for native events since it’s called after any life cycle method and can also be invoked manually to trigger a re-render.
64
63
```cshtml
65
64
@using Syncfusion.Blazor.Inputs
66
65
@@ -85,7 +84,7 @@ There is no need to call this method for native events since it’s called after
85
84
86
85
## Complex data binding
87
86
88
-
The complex data values can be bound to the TextBox component.The following code demonstrates how to bind complex data values to the TextBox component.
87
+
Bind nested (complex) data by referencing the property path in the `Value` parameter.
Copy file name to clipboardExpand all lines: blazor/textbox/events.md
+9-9Lines changed: 9 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,11 +9,11 @@ documentation: ug
9
9
10
10
# Events in Blazor TextBox Component
11
11
12
-
This section explains the list of events of the TextBox component which will be triggered for appropriate TextBox actions.
12
+
This section lists the TextBox events and when they are triggered during user interactions.
13
13
14
14
## Blur
15
15
16
-
`Blur` event triggers when the TextBox has focus-out.
16
+
The `Blur` event triggers when the TextBox loses focus.
17
17
18
18
```cshtml
19
19
@using Syncfusion.Blazor.Inputs
@@ -30,7 +30,7 @@ This section explains the list of events of the TextBox component which will be
30
30
31
31
## Created
32
32
33
-
`Created` event triggers when the TextBox component is created.
33
+
The `Created` event triggers after the TextBox component is initialized and rendered.
34
34
35
35
```cshtml
36
36
@using Syncfusion.Blazor.Inputs
@@ -47,7 +47,7 @@ This section explains the list of events of the TextBox component which will be
47
47
48
48
## Destroyed
49
49
50
-
`Destroyed` event triggers when the TextBox component is destroyed.
50
+
The `Destroyed` event triggers when the TextBox component is disposed.
51
51
52
52
```cshtml
53
53
@using Syncfusion.Blazor.Inputs
@@ -64,7 +64,7 @@ This section explains the list of events of the TextBox component which will be
64
64
65
65
## Focus
66
66
67
-
`Focus` event triggers when the TextBox gets focus.
67
+
The `Focus` event triggers when the TextBox receives focus.
68
68
69
69
```cshtml
70
70
@using Syncfusion.Blazor.Inputs
@@ -81,7 +81,7 @@ This section explains the list of events of the TextBox component which will be
81
81
82
82
## Input
83
83
84
-
`Input` event triggers each time when the value of TextBox has changed.
84
+
The `Input` event triggers every time the TextBox value changes (on each keystroke or input).
85
85
86
86
```cshtml
87
87
@using Syncfusion.Blazor.Inputs
@@ -98,7 +98,7 @@ This section explains the list of events of the TextBox component which will be
98
98
99
99
## ValueChange
100
100
101
-
`ValueChange` event triggers when the content of TextBox has changed and gets focus-out.
101
+
The `ValueChange` event triggers when the TextBox value is committed (typically on focus out) and has changed since it received focus.
102
102
103
103
```cshtml
104
104
@using Syncfusion.Blazor.Inputs
@@ -115,7 +115,7 @@ This section explains the list of events of the TextBox component which will be
115
115
116
116
## ValueChanged
117
117
118
-
`ValueChanged` event specifies the callback to trigger when the value changes.
118
+
The `ValueChanged` event is the parameter callback that fires when the `Value` parameter changes. It is commonly used with `@bind-Value` for two-way binding or to react to value updates programmatically.
119
119
120
120
```cshtml
121
121
@using Syncfusion.Blazor.Inputs
@@ -130,4 +130,4 @@ This section explains the list of events of the TextBox component which will be
130
130
}
131
131
```
132
132
133
-
N> TexTBox is limited with these events and new events will be added in the future based on the user requests. If the event you are looking for is not on the list, then request [here](https://www.syncfusion.com/feedback/blazor-components).
133
+
N> TextBox is limited with these events and new events will be added in the future based on the user requests. If the event you are looking for is not on the list, then request [here](https://www.syncfusion.com/feedback/blazor-components).
0 commit comments