diff --git a/snippets/TagInput.md b/snippets/TagInput.md
index 9065a0e0e..f3879a56d 100644
--- a/snippets/TagInput.md
+++ b/snippets/TagInput.md
@@ -14,102 +14,103 @@ Renders an input field to add tags.
 
 ```css
 .tag-input {
-	display: flex;
-	align-items: flex-start;
-	flex-wrap: wrap;
-	min-height: 48px;
-	width: 480px;
-	padding: 0 8px;
-	border: 1px solid rgb(214, 216, 218);
-	border-radius: 6px;
+  display: flex;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  min-height: 48px;
+  width: 480px;
+  padding: 0 8px;
+  border: 1px solid rgb(214, 216, 218);
+  border-radius: 6px;
 }
 
 .tag-input input {
-	flex: 1;
-	border: none;
-	height: 46px;
-	font-size: 14px;
-	padding: 4px 0 0 0;
-	&:focus {
-		outline: transparent;
-	}
+  flex: 1;
+  border: none;
+  height: 46px;
+  font-size: 14px;
+  padding: 4px 0 0;
+  &:focus {
+      outline: transparent;
+  }
 }
 
 #tags {
-	display: flex;
-	flex-wrap: wrap;
-	padding: 0;
-	margin: 8px 0 0 0;
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0;
+  margin: 8px 0 0;
 }
 
 .tag {
-	width: auto;
-	height: 32px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	color: #fff;
-	padding: 0 8px;
-	font-size: 14px;
-	list-style: none;
-	border-radius: 6px;
-	margin: 0 8px 8px 0;
-	background: #0052cc;
+  width: auto;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  padding: 0 8px;
+  font-size: 14px;
+  list-style: none;
+  border-radius: 6px;
+  margin: 0 8px 8px 0;
+  background: #0052cc;
 }
 
 .tag span {
-	margin-top: 3px;
+  margin-top: 3px;
 }
 
 .tag i {
-	width: 16px;
-	height: 16px;
-	line-height: 16px;
-	text-align: center;
-	font-size: 14px;
-	margin-left: 8px;
-	color: #0052cc;
-	border-radius: 50%;
-	background: #fff;
-	cursor: pointer;
+  width: 16px;
+  height: 16px;
+  line-height: 16px;
+  text-align: center;
+  font-size: 14px;
+  margin-left: 8px;
+  color: #0052cc;
+  border-radius: 50%;
+  background: #fff;
+  cursor: pointer;
 }
+
 ```
 
 ```jsx
 function TagInput() {
-	const [tags, setTags] = React.useState(['NodeJs', 'MongoDB'])
-	const removeTags = indexToRemove => {
-		setTags([...tags.filter((_, index) => index !== indexToRemove)])
-	}
-	const addTags = event => {
-		if (event.target.value !== '') {
-			setTags([...tags, event.target.value])
-			event.target.value = ''
-		}
-	}
-	return (
-		<div className='tags-input'>
-			<ul id='tags'
-				{tags.map((tag, index) => (
-					<li key={index} className='tag'
-						<span>{tag}</span>
-						<i
-							onClick={() => removeTags(index)}
-						>
-							x
-						</i>
-					</li>
-				))}
-			</ul>
-			<input
-				type='text'
-				onKeyUp={event =>
-					event.key === 'Enter' ? addTags(event) : null
-				}
-				placeholder='Press enter to add tags'
-			/>
-		</div>
-	)
+  const [tags, setTags] = React.useState(['NodeJs', 'MongoDB'])
+  const removeTags = indexToRemove => {
+    setTags([...tags.filter((_, index) => index !== indexToRemove)])
+  }
+  const addTags = event => {
+    if (event.target.value !== '') {
+      setTags([...tags, event.target.value])
+      event.target.value = ''
+    }
+  }
+  return (
+    <div className='tags-input'>
+      <ul id='tags'
+        {tags.map((tag, index) => (
+          <li key={index} className='tag'
+            <span>{tag}</span>
+            <i
+              onClick={() => removeTags(index)}
+            >
+              x
+            </i>
+          </li>
+        ))}
+      </ul>
+      <input
+        type='text'
+        onKeyUp={event =>
+          event.key === 'Enter' ? addTags(event) : null
+        }
+        placeholder='Press enter to add tags'
+      />
+    </div>
+  )
 }
 ```