From dc89d64cb852fbeeea281032c768c1c485a725b1 Mon Sep 17 00:00:00 2001
From: TomJGooding <101601846+TomJGooding@users.noreply.github.com>
Date: Sat, 25 Jan 2025 16:50:15 +0000
Subject: [PATCH] docs(masked input): fix code annotations

Fix the incomplete annotations in the `MaskedInput` code example, which
appear to have been started but the content never actually added.
---
 docs/widgets/masked_input.md | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/docs/widgets/masked_input.md b/docs/widgets/masked_input.md
index 426af52937..3c0d8b1634 100644
--- a/docs/widgets/masked_input.md
+++ b/docs/widgets/masked_input.md
@@ -18,10 +18,13 @@ The example below shows a masked input to ease entering a credit card number.
 
 === "masked_input.py"
 
-    ```python
+    ```python hl_lines="6-13 25"
     --8<-- "docs/examples/widgets/masked_input.py"
     ```
 
+    1. Textual offers default styling for the `-invalid` CSS class (a red border), which is automatically applied to the `MaskedInput` when validation fails. We can also provide custom styling for the `-valid` class, as seen here. In this case, we add a green border around the `MaskedInput` to indicate successful validation.
+    2. This example shows how to define a template mask for a credit card number, which requires 16 digits in groups of 4.
+
 ## Reactive Attributes
 
 | Name       | Type  | Default | Description               |