1 files changed, 43 insertions, 2 deletions
diff --git a/doc/development/fe_guide/view_component.md b/doc/development/fe_guide/view_component.md
index f4bb7ac3a2e..2e373e6933b 100644
--- a/doc/development/fe_guide/view_component.md
+++ b/doc/development/fe_guide/view_component.md
@@ -13,18 +13,24 @@ They are rendered server-side and can be seamlessly used with template languages
 Refer to the official [documentation](https://viewcomponent.org/) to learn more or
 watch this [introduction video](https://youtu.be/akRhUbvtnmo).
 
+## Browse components with Lookbook
+
+We have a [Lookbook](https://github.com/allmarkedup/lookbook) in [http://gdk.test:3000/rails/lookbook](http://gdk.test:3000/rails/lookbook) (only available in development mode) to browse and interact with ViewComponent previews.
+
 ## Pajamas components
 
 Some of the components of our [Pajamas](https://design.gitlab.com) design system are
 available as a ViewComponent in `app/components/pajamas`.
 
 NOTE:
-We have a small but growing number of Pajamas components. Reach out to the
-[Foundations team](https://about.gitlab.com/handbook/engineering/development/dev/ecosystem/foundations/)
+We are still in the process of creating these components, so not every Pajamas component is available as ViewComponent.
+Reach out to the [Foundations team](https://about.gitlab.com/handbook/engineering/development/dev/ecosystem/foundations/)
 if the component you are looking for is not yet available.
 
 ### Available components
 
+Consider this list a best effort. The full list can be found in [`app/components/pajamas`](https://gitlab.com/gitlab-org/gitlab/-/tree/master/app/components/pajamas). Also see [our Lookbook](http://gdk.test:3000/rails/lookbook) for a more interactive way to browse our components.
+
 #### Alert
 
 The `Pajamas::AlertComponent` follows the [Pajamas Alert](https://design.gitlab.com/components/alert) specification.
@@ -147,6 +153,39 @@ If you want to add custom attributes to any of these or the card itself, use the
 For the full list of options, see its
 [source](https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/components/pajamas/card_component.rb).
 
+#### Checkbox tag
+
+The `Pajamas::CheckboxTagComponent` follows the [Pajamas Checkbox](https://design.gitlab.com/components/checkbox) specification.
+
+The `name` argument and `label` slot are required.
+
+For example:
+
+```haml
+= render Pajamas::CheckboxTagComponent.new(name: 'project[initialize_with_sast]',
+  checkbox_options: { data: { qa_selector: 'initialize_with_sast_checkbox', track_label: track_label, track_action: 'activate_form_input', track_property: 'init_with_sast' } }) do |c|
+  = c.label do
+    = s_('ProjectsNew|Enable Static Application Security Testing (SAST)')
+  = c.help_text do
+    = s_('ProjectsNew|Analyze your source code for known security vulnerabilities.')
+    = link_to _('Learn more.'), help_page_path('user/application_security/sast/index'), target: '_blank', rel: 'noopener noreferrer', data: { track_action: 'followed' }
+```
+
+For the full list of options, see its
+[source](https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/components/pajamas/checkbox_tag_component.rb).
+
+#### Checkbox
+
+The `Pajamas::CheckboxComponent` follows the [Pajamas Checkbox](https://design.gitlab.com/components/checkbox) specification.
+
+NOTE:
+`Pajamas::CheckboxComponent` is used internally by the [GitLab UI form builder](haml.md#use-the-gitlab-ui-form-builder) and requires an instance of [ActionView::Helpers::FormBuilder](https://api.rubyonrails.org/v6.1.0/classes/ActionView/Helpers/FormBuilder.html) to be passed as the `form` argument.
+It is preferred to use the [gitlab_ui_checkbox_component](haml.md#gitlab_ui_checkbox_component) method to render this ViewComponent.
+To use a checkbox without an instance of [ActionView::Helpers::FormBuilder](https://api.rubyonrails.org/v6.1.0/classes/ActionView/Helpers/FormBuilder.html) use [CheckboxTagComponent](#checkbox-tag).
+
+For the full list of options, see its
+[source](https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/components/pajamas/checkbox_component.rb).
+
 #### Toggle
 
 The `Pajamas::ToggleComponent` follows the [Pajamas Toggle](https://design.gitlab.com/components/toggle) specification.
@@ -172,3 +211,5 @@ For the full list of options, see its
   over creating plain Haml tags with CSS classes.
 - If you are making changes to an existing Haml view and see, for example, a
   button that is still implemented with plain Haml, consider migrating it to use a ViewComponent.
+- If you decide to create a new component, consider creating [previews](https://viewcomponent.org/guide/previews.html) for it, too.
+  This will help others to discover your component with Lookbook, also it makes it much easier to test its different states.