@charcoal-ui/react 3.4.0 → 3.6.0

package/src/components/Checkbox/__snapshots__/snapshot.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`using dark theme storiesOf(index.story.tsx).add(Labelled) snapshot 1`] = `
+exports[`using dark theme storiesOf(index.story.tsx).add(Invalid) snapshot 1`] = `
 .c0 {
   position: relative;
   display: -webkit-box;
@@ -17,7 +17,7 @@ exports[`using dark theme storiesOf(index.story.tsx).add(Labelled) snapshot 1`]
 }
 
 .c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
+.c0[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
 }
 
@@ -35,55 +35,219 @@ exports[`using dark theme storiesOf(index.story.tsx).add(Labelled) snapshot 1`]
   width: 20px;
   height: 20px;
   border-radius: 4px;
-  -webkit-transition: 0.2s box-shadow;
-  transition: 0.2s box-shadow;
-  -webkit-transition: all 0.2s !important;
-  transition: all 0.2s !important;
+  -webkit-transition: 0.2s box-shadow,0.2s background-color;
+  transition: 0.2s box-shadow,0.2s background-color;
 }
 
 .c2[type='checkbox']:checked {
   background-color: var(--charcoal-brand);
-  -webkit-transition: 0.2s background-color;
-  transition: 0.2s background-color;
 }
 
-.c2[type='checkbox']:checked:hover:not(:disabled):not([aria-disabled]),
-.c2[type='checkbox']:checked:hover[aria-disabled=false] {
+.c2[type='checkbox']:checked:not(:disabled):not([aria-disabled]):hover,
+.c2[type='checkbox']:checked[aria-disabled='false']:hover {
   background-color: var(--charcoal-brand-hover);
 }
 
-.c2[type='checkbox']:checked:active:not(:disabled):not([aria-disabled]),
-.c2[type='checkbox']:checked:active[aria-disabled=false] {
+.c2[type='checkbox']:checked:not(:disabled):not([aria-disabled]):active,
+.c2[type='checkbox']:checked[aria-disabled='false']:active {
   background-color: var(--charcoal-brand-press);
 }
 
+.c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus,
+.c2[type='checkbox'][aria-disabled='false']:focus,
+.c2[type='checkbox']:not(:disabled):not([aria-disabled]):active,
+.c2[type='checkbox'][aria-disabled='false']:active {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c2[type='checkbox'][aria-disabled='false']:focus:not(:focus-visible),
+.c2[type='checkbox']:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
+.c2[type='checkbox'][aria-disabled='false']:active:not(:focus-visible) {
+  outline: none;
+}
+
+.c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus-visible,
+.c2[type='checkbox'][aria-disabled='false']:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c2[type='checkbox']:not(:disabled):not([aria-disabled])[aria-invalid='true'],
+.c2[type='checkbox'][aria-disabled='false'][aria-invalid='true'] {
+  box-shadow: 0 0 0 4px rgba(255,43,0,0.32);
+}
+
 .c2[type='checkbox']:not(:checked) {
   border-width: 2px;
   border-style: solid;
-  border-color: #5c5c5c;
+  border-color: var(--charcoal-text4);
+}
+
+.c3 {
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  color: var(--charcoal-text5);
+  visibility: hidden;
+}
+
+.c4 {
+  color: var(--charcoal-text2);
+  font-size: 14px;
+  line-height: 20px;
+}
+
+<label
+  aria-disabled={false}
+  className="c0"
+>
+  <div
+    className="c1"
+  >
+    <input
+      aria-invalid={true}
+      checked={false}
+      className="c2"
+      disabled={false}
+      name="labelled"
+      onBlur={[Function]}
+      onChange={[Function]}
+      onClick={[Function]}
+      onDragStart={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      onMouseUp={[Function]}
+      onTouchCancel={[Function]}
+      onTouchEnd={[Function]}
+      onTouchMove={[Function]}
+      onTouchStart={[Function]}
+      type="checkbox"
+    />
+    <div
+      aria-hidden={true}
+      checked={false}
+      className="c3"
+    >
+      <pixiv-icon
+        name="24/Check"
+        unsafe-non-guideline-scale={0.6666666666666666}
+      />
+    </div>
+  </div>
+  <div
+    className="c4"
+  >
+    同意する
+  </div>
+</label>
+`;
+
+exports[`using dark theme storiesOf(index.story.tsx).add(Labelled) snapshot 1`] = `
+.c0 {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  cursor: pointer;
+  gap: 4px;
+}
+
+.c0:disabled,
+.c0[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
+}
+
+.c0:disabled,
+.c0[aria-disabled]:not([aria-disabled='false']) {
+  opacity: 0.32;
+}
+
+.c1 {
+  position: relative;
+}
+
+.c2[type='checkbox'] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  display: block;
+  cursor: pointer;
+  margin: 0;
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+  -webkit-transition: 0.2s box-shadow,0.2s background-color;
+  transition: 0.2s box-shadow,0.2s background-color;
+}
+
+.c2[type='checkbox']:checked {
+  background-color: var(--charcoal-brand);
+}
+
+.c2[type='checkbox']:checked:not(:disabled):not([aria-disabled]):hover,
+.c2[type='checkbox']:checked[aria-disabled='false']:hover {
+  background-color: var(--charcoal-brand-hover);
+}
+
+.c2[type='checkbox']:checked:not(:disabled):not([aria-disabled]):active,
+.c2[type='checkbox']:checked[aria-disabled='false']:active {
+  background-color: var(--charcoal-brand-press);
 }
 
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus,
-.c2[type='checkbox'][aria-disabled=false]:focus,
+.c2[type='checkbox'][aria-disabled='false']:focus,
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):active,
-.c2[type='checkbox'][aria-disabled=false]:active {
+.c2[type='checkbox'][aria-disabled='false']:active {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c2[type='checkbox'][aria-disabled=false]:focus:not(:focus-visible),
+.c2[type='checkbox'][aria-disabled='false']:focus:not(:focus-visible),
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c2[type='checkbox'][aria-disabled=false]:active:not(:focus-visible) {
+.c2[type='checkbox'][aria-disabled='false']:active:not(:focus-visible) {
   outline: none;
 }
 
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus-visible,
-.c2[type='checkbox'][aria-disabled=false]:focus-visible {
+.c2[type='checkbox'][aria-disabled='false']:focus-visible {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
+.c2[type='checkbox']:not(:disabled):not([aria-disabled])[aria-invalid='true'],
+.c2[type='checkbox'][aria-disabled='false'][aria-invalid='true'] {
+  box-shadow: 0 0 0 4px rgba(255,43,0,0.32);
+}
+
+.c2[type='checkbox']:not(:checked) {
+  border-width: 2px;
+  border-style: solid;
+  border-color: var(--charcoal-text4);
+}
+
 .c3 {
   position: absolute;
   top: -2px;
@@ -245,7 +409,7 @@ exports[`using dark theme storiesOf(index.story.tsx).add(Unlabelled) snapshot 1`
 }
 
 .c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
+.c0[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
 }
 
@@ -263,55 +427,56 @@ exports[`using dark theme storiesOf(index.story.tsx).add(Unlabelled) snapshot 1`
   width: 20px;
   height: 20px;
   border-radius: 4px;
-  -webkit-transition: 0.2s box-shadow;
-  transition: 0.2s box-shadow;
-  -webkit-transition: all 0.2s !important;
-  transition: all 0.2s !important;
+  -webkit-transition: 0.2s box-shadow,0.2s background-color;
+  transition: 0.2s box-shadow,0.2s background-color;
 }
 
 .c2[type='checkbox']:checked {
   background-color: var(--charcoal-brand);
-  -webkit-transition: 0.2s background-color;
-  transition: 0.2s background-color;
 }
 
-.c2[type='checkbox']:checked:hover:not(:disabled):not([aria-disabled]),
-.c2[type='checkbox']:checked:hover[aria-disabled=false] {
+.c2[type='checkbox']:checked:not(:disabled):not([aria-disabled]):hover,
+.c2[type='checkbox']:checked[aria-disabled='false']:hover {
   background-color: var(--charcoal-brand-hover);
 }
 
-.c2[type='checkbox']:checked:active:not(:disabled):not([aria-disabled]),
-.c2[type='checkbox']:checked:active[aria-disabled=false] {
+.c2[type='checkbox']:checked:not(:disabled):not([aria-disabled]):active,
+.c2[type='checkbox']:checked[aria-disabled='false']:active {
   background-color: var(--charcoal-brand-press);
 }
 
-.c2[type='checkbox']:not(:checked) {
-  border-width: 2px;
-  border-style: solid;
-  border-color: #5c5c5c;
-}
-
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus,
-.c2[type='checkbox'][aria-disabled=false]:focus,
+.c2[type='checkbox'][aria-disabled='false']:focus,
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):active,
-.c2[type='checkbox'][aria-disabled=false]:active {
+.c2[type='checkbox'][aria-disabled='false']:active {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c2[type='checkbox'][aria-disabled=false]:focus:not(:focus-visible),
+.c2[type='checkbox'][aria-disabled='false']:focus:not(:focus-visible),
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c2[type='checkbox'][aria-disabled=false]:active:not(:focus-visible) {
+.c2[type='checkbox'][aria-disabled='false']:active:not(:focus-visible) {
   outline: none;
 }
 
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus-visible,
-.c2[type='checkbox'][aria-disabled=false]:focus-visible {
+.c2[type='checkbox'][aria-disabled='false']:focus-visible {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
+.c2[type='checkbox']:not(:disabled):not([aria-disabled])[aria-invalid='true'],
+.c2[type='checkbox'][aria-disabled='false'][aria-invalid='true'] {
+  box-shadow: 0 0 0 4px rgba(255,43,0,0.32);
+}
+
+.c2[type='checkbox']:not(:checked) {
+  border-width: 2px;
+  border-style: solid;
+  border-color: var(--charcoal-text4);
+}
+
 .c3 {
   position: absolute;
   top: -2px;
@@ -381,7 +546,7 @@ exports[`using dark theme storiesOf(index.story.tsx).add(Unlabelled) snapshot 1`
 </div>
 `;
 
-exports[`using light theme storiesOf(index.story.tsx).add(Labelled) snapshot 1`] = `
+exports[`using light theme storiesOf(index.story.tsx).add(Invalid) snapshot 1`] = `
 .c0 {
   position: relative;
   display: -webkit-box;
@@ -398,7 +563,7 @@ exports[`using light theme storiesOf(index.story.tsx).add(Labelled) snapshot 1`]
 }
 
 .c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
+.c0[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
 }
 
@@ -416,55 +581,219 @@ exports[`using light theme storiesOf(index.story.tsx).add(Labelled) snapshot 1`]
   width: 20px;
   height: 20px;
   border-radius: 4px;
-  -webkit-transition: 0.2s box-shadow;
-  transition: 0.2s box-shadow;
-  -webkit-transition: all 0.2s !important;
-  transition: all 0.2s !important;
+  -webkit-transition: 0.2s box-shadow,0.2s background-color;
+  transition: 0.2s box-shadow,0.2s background-color;
 }
 
 .c2[type='checkbox']:checked {
   background-color: var(--charcoal-brand);
-  -webkit-transition: 0.2s background-color;
-  transition: 0.2s background-color;
 }
 
-.c2[type='checkbox']:checked:hover:not(:disabled):not([aria-disabled]),
-.c2[type='checkbox']:checked:hover[aria-disabled=false] {
+.c2[type='checkbox']:checked:not(:disabled):not([aria-disabled]):hover,
+.c2[type='checkbox']:checked[aria-disabled='false']:hover {
   background-color: var(--charcoal-brand-hover);
 }
 
-.c2[type='checkbox']:checked:active:not(:disabled):not([aria-disabled]),
-.c2[type='checkbox']:checked:active[aria-disabled=false] {
+.c2[type='checkbox']:checked:not(:disabled):not([aria-disabled]):active,
+.c2[type='checkbox']:checked[aria-disabled='false']:active {
   background-color: var(--charcoal-brand-press);
 }
 
+.c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus,
+.c2[type='checkbox'][aria-disabled='false']:focus,
+.c2[type='checkbox']:not(:disabled):not([aria-disabled]):active,
+.c2[type='checkbox'][aria-disabled='false']:active {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c2[type='checkbox'][aria-disabled='false']:focus:not(:focus-visible),
+.c2[type='checkbox']:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
+.c2[type='checkbox'][aria-disabled='false']:active:not(:focus-visible) {
+  outline: none;
+}
+
+.c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus-visible,
+.c2[type='checkbox'][aria-disabled='false']:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c2[type='checkbox']:not(:disabled):not([aria-disabled])[aria-invalid='true'],
+.c2[type='checkbox'][aria-disabled='false'][aria-invalid='true'] {
+  box-shadow: 0 0 0 4px rgba(255,43,0,0.32);
+}
+
 .c2[type='checkbox']:not(:checked) {
   border-width: 2px;
   border-style: solid;
-  border-color: #adadad;
+  border-color: var(--charcoal-text4);
+}
+
+.c3 {
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  color: var(--charcoal-text5);
+  visibility: hidden;
+}
+
+.c4 {
+  color: var(--charcoal-text2);
+  font-size: 14px;
+  line-height: 20px;
+}
+
+<label
+  aria-disabled={false}
+  className="c0"
+>
+  <div
+    className="c1"
+  >
+    <input
+      aria-invalid={true}
+      checked={false}
+      className="c2"
+      disabled={false}
+      name="labelled"
+      onBlur={[Function]}
+      onChange={[Function]}
+      onClick={[Function]}
+      onDragStart={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      onMouseUp={[Function]}
+      onTouchCancel={[Function]}
+      onTouchEnd={[Function]}
+      onTouchMove={[Function]}
+      onTouchStart={[Function]}
+      type="checkbox"
+    />
+    <div
+      aria-hidden={true}
+      checked={false}
+      className="c3"
+    >
+      <pixiv-icon
+        name="24/Check"
+        unsafe-non-guideline-scale={0.6666666666666666}
+      />
+    </div>
+  </div>
+  <div
+    className="c4"
+  >
+    同意する
+  </div>
+</label>
+`;
+
+exports[`using light theme storiesOf(index.story.tsx).add(Labelled) snapshot 1`] = `
+.c0 {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  cursor: pointer;
+  gap: 4px;
+}
+
+.c0:disabled,
+.c0[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
+}
+
+.c0:disabled,
+.c0[aria-disabled]:not([aria-disabled='false']) {
+  opacity: 0.32;
+}
+
+.c1 {
+  position: relative;
+}
+
+.c2[type='checkbox'] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  display: block;
+  cursor: pointer;
+  margin: 0;
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+  -webkit-transition: 0.2s box-shadow,0.2s background-color;
+  transition: 0.2s box-shadow,0.2s background-color;
+}
+
+.c2[type='checkbox']:checked {
+  background-color: var(--charcoal-brand);
+}
+
+.c2[type='checkbox']:checked:not(:disabled):not([aria-disabled]):hover,
+.c2[type='checkbox']:checked[aria-disabled='false']:hover {
+  background-color: var(--charcoal-brand-hover);
+}
+
+.c2[type='checkbox']:checked:not(:disabled):not([aria-disabled]):active,
+.c2[type='checkbox']:checked[aria-disabled='false']:active {
+  background-color: var(--charcoal-brand-press);
 }
 
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus,
-.c2[type='checkbox'][aria-disabled=false]:focus,
+.c2[type='checkbox'][aria-disabled='false']:focus,
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):active,
-.c2[type='checkbox'][aria-disabled=false]:active {
+.c2[type='checkbox'][aria-disabled='false']:active {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c2[type='checkbox'][aria-disabled=false]:focus:not(:focus-visible),
+.c2[type='checkbox'][aria-disabled='false']:focus:not(:focus-visible),
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c2[type='checkbox'][aria-disabled=false]:active:not(:focus-visible) {
+.c2[type='checkbox'][aria-disabled='false']:active:not(:focus-visible) {
   outline: none;
 }
 
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus-visible,
-.c2[type='checkbox'][aria-disabled=false]:focus-visible {
+.c2[type='checkbox'][aria-disabled='false']:focus-visible {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
+.c2[type='checkbox']:not(:disabled):not([aria-disabled])[aria-invalid='true'],
+.c2[type='checkbox'][aria-disabled='false'][aria-invalid='true'] {
+  box-shadow: 0 0 0 4px rgba(255,43,0,0.32);
+}
+
+.c2[type='checkbox']:not(:checked) {
+  border-width: 2px;
+  border-style: solid;
+  border-color: var(--charcoal-text4);
+}
+
 .c3 {
   position: absolute;
   top: -2px;
@@ -626,7 +955,7 @@ exports[`using light theme storiesOf(index.story.tsx).add(Unlabelled) snapshot 1
 }
 
 .c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
+.c0[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
 }
 
@@ -644,55 +973,56 @@ exports[`using light theme storiesOf(index.story.tsx).add(Unlabelled) snapshot 1
   width: 20px;
   height: 20px;
   border-radius: 4px;
-  -webkit-transition: 0.2s box-shadow;
-  transition: 0.2s box-shadow;
-  -webkit-transition: all 0.2s !important;
-  transition: all 0.2s !important;
+  -webkit-transition: 0.2s box-shadow,0.2s background-color;
+  transition: 0.2s box-shadow,0.2s background-color;
 }
 
 .c2[type='checkbox']:checked {
   background-color: var(--charcoal-brand);
-  -webkit-transition: 0.2s background-color;
-  transition: 0.2s background-color;
 }
 
-.c2[type='checkbox']:checked:hover:not(:disabled):not([aria-disabled]),
-.c2[type='checkbox']:checked:hover[aria-disabled=false] {
+.c2[type='checkbox']:checked:not(:disabled):not([aria-disabled]):hover,
+.c2[type='checkbox']:checked[aria-disabled='false']:hover {
   background-color: var(--charcoal-brand-hover);
 }
 
-.c2[type='checkbox']:checked:active:not(:disabled):not([aria-disabled]),
-.c2[type='checkbox']:checked:active[aria-disabled=false] {
+.c2[type='checkbox']:checked:not(:disabled):not([aria-disabled]):active,
+.c2[type='checkbox']:checked[aria-disabled='false']:active {
   background-color: var(--charcoal-brand-press);
 }
 
-.c2[type='checkbox']:not(:checked) {
-  border-width: 2px;
-  border-style: solid;
-  border-color: #adadad;
-}
-
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus,
-.c2[type='checkbox'][aria-disabled=false]:focus,
+.c2[type='checkbox'][aria-disabled='false']:focus,
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):active,
-.c2[type='checkbox'][aria-disabled=false]:active {
+.c2[type='checkbox'][aria-disabled='false']:active {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c2[type='checkbox'][aria-disabled=false]:focus:not(:focus-visible),
+.c2[type='checkbox'][aria-disabled='false']:focus:not(:focus-visible),
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c2[type='checkbox'][aria-disabled=false]:active:not(:focus-visible) {
+.c2[type='checkbox'][aria-disabled='false']:active:not(:focus-visible) {
   outline: none;
 }
 
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus-visible,
-.c2[type='checkbox'][aria-disabled=false]:focus-visible {
+.c2[type='checkbox'][aria-disabled='false']:focus-visible {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
+.c2[type='checkbox']:not(:disabled):not([aria-disabled])[aria-invalid='true'],
+.c2[type='checkbox'][aria-disabled='false'][aria-invalid='true'] {
+  box-shadow: 0 0 0 4px rgba(255,43,0,0.32);
+}
+
+.c2[type='checkbox']:not(:checked) {
+  border-width: 2px;
+  border-style: solid;
+  border-color: var(--charcoal-text4);
+}
+
 .c3 {
   position: absolute;
   top: -2px;

package/src/components/Checkbox/index.story.tsx

@@ -60,6 +60,30 @@ Labelled.args = {
   invalid: false,
 }
 
+export const Invalid: Story<Omit<Props, 'invalid'>> = (props) => {
+  return (
+    <Checkbox
+      {...props}
+      name="labelled"
+      label="label"
+      invalid
+      onBlur={action('blur')}
+      onClick={action('click')}
+      onChange={action('change')}
+      onFocus={action('focus')}
+    >
+      同意する
+    </Checkbox>
+  )
+}
+
+Invalid.args = {
+  checked: false,
+  defaultChecked: false,
+  disabled: false,
+  readonly: false,
+}
+
 export const Unlabelled: Story<Props> = (props) => {
   return (
     <div>