UPDATE(docs): Include tick field in docs

Author: MatteuSan

docs/docs/develop/components/tick-field.md

@@ -6,6 +6,41 @@ displayed_sidebar: develop
 ---
 Tickboxes allow the user to toggle a specific option on or off. They are commonly used in forms and site settings.
 
+<div class="hs-component-preview col-2">
+  <div class="hs-component-preview__row">
+    <label class="hs-tick-field">
+      <input class="hs-tick-field__input" type="radio" id="value" name="input" value="value" />
+      <div class="d-flex flow-col items-start">
+        <span class="hs-tick-field__label">HSTickField Label</span>
+        <span class="hs-tick-field__helper">Helper Text</span>
+      </div>
+    </label>
+    <label class="hs-tick-field">
+      <input class="hs-tick-field__input" type="radio" id="value" name="input" value="value" />
+      <div class="d-flex flow-col items-start">
+        <span class="hs-tick-field__label">HSTickField Label</span>
+        <span class="hs-tick-field__helper">Helper Text</span>
+      </div>
+    </label>
+  </div>
+  <div class="hs-component-preview__row">
+    <label class="hs-tick-field">
+      <input class="hs-tick-field__input" type="checkbox" id="value" name="input" value="value" />
+      <div class="d-flex flow-col items-start">
+        <span class="hs-tick-field__label">HSTickField Label</span>
+        <span class="hs-tick-field__helper">Helper Text</span>
+      </div>
+    </label>
+    <label class="hs-tick-field">
+      <input class="hs-tick-field__input" type="checkbox" id="value" name="input" value="value" />
+      <div class="d-flex flow-col items-start">
+        <span class="hs-tick-field__label">HSTickField Label</span>
+        <span class="hs-tick-field__helper">Helper Text</span>
+      </div>
+    </label>
+  </div>
+</div>
+
 ## Usage
 ### HTML
 This component can be used both as a `radio` input.

docs/sidebars.js

@@ -112,6 +112,7 @@ const sidebars = {
       'develop/components/hs-link',
       'develop/components/hs-profile',
       'develop/components/hs-select-field',
+      'develop/components/hs-tick-field',
       'develop/components/hs-wallet',
     ],
     'Integrations': [

docs/src/scss/main.scss

@@ -31,6 +31,7 @@
 @use '~@devprotocol/hashi/hs-link';
 @use '~@devprotocol/hashi/hs-profile';
 @use '~@devprotocol/hashi/hs-select-field';
+@use '~@devprotocol/hashi/hs-tick-field';
 @use '~@devprotocol/hashi/hs-utils';
 
 @use 'modules/doc-theme-overrides';
@@ -101,6 +102,7 @@
   @include hs-link.render();
   @include hs-profile.render();
   @include hs-select-field.render();
+  @include hs-tick-field.render();
 
   .hs-badge {
     --ifm-link-hover-color: #{hashi.token-get('primary-ink')} !important;