diff --git a/app/components/dsfr/checkbox_component.rb b/app/components/dsfr/checkbox_component.rb
new file mode 100644
index 000000000..a516a2838
--- /dev/null
+++ b/app/components/dsfr/checkbox_component.rb
@@ -0,0 +1,22 @@
+class Dsfr::CheckboxComponent < ApplicationComponent
+  attr_reader :error
+
+  def initialize(form:, target:, checkboxes:, error: nil)
+    @form = form
+    @target = target
+    @checkboxes = checkboxes
+    @error = error
+  end
+
+  def error?
+    # TODO: mettre correctement le aria-labelled-by avec l'id du div qui contient les erreurs
+    # https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/bouton-radio/
+    @error.present?
+  end
+
+  def each_checkboxes
+    @checkboxes.each do |button|
+      yield(*button.values_at(:label, :checked_value, :unchecked_value, :hint), button.except(:label, :checked_value, :unchecked_value, :hint))
+    end
+  end
+end
diff --git a/app/components/dsfr/checkbox_component/checkbox_component.html.haml b/app/components/dsfr/checkbox_component/checkbox_component.html.haml
new file mode 100644
index 000000000..5e53f15b0
--- /dev/null
+++ b/app/components/dsfr/checkbox_component/checkbox_component.html.haml
@@ -0,0 +1,20 @@
+%fieldset{ class: class_names("fr-fieldset": true, "fr-fieldset--error": error?), 'aria-labelledby': 'radio-hint-element-legend radio-hint-element-messages', role: error? ? :group : nil }
+  %legend.fr-fieldset__legend--regular.fr-fieldset__legend
+    = content
+
+  - each_checkboxes do |label, checked_value, unchecked_value, hint, button_options|
+    .fr-fieldset__element
+      .fr-checkbox-group
+        = @form.check_box @target, button_options.merge(id: checked_value.to_s.parameterize, multiple: true), checked_value, unchecked_value
+        = @form.label @target, for: checked_value.to_s.parameterize, class: 'fr-label' do
+          - capture do
+            = label
+
+            = button_options[:after_label] if button_options[:after_label]
+
+            %span.fr-hint-text= hint if hint
+
+  .fr-messages-group{ 'aria-live': 'assertive' }
+    - if error?
+      %p.fr-message.fr-message--error= error
+