1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25

import { Checkbox, Fieldset, FieldsetLegend } from "@gunkin/uiify";

export default function Example() {
  return (
    <Fieldset className="">
      <FieldsetLegend className="">Contact preferences</FieldsetLegend>
      <Checkbox
        className=""
        id="contact-email"
        label="Email"
        name="contact"
        value="email"
        slotProps={{ input: { className: "" } }}
      />
      <Checkbox
        className=""
        id="contact-sms"
        label="Text message"
        name="contact"
        value="sms"
        slotProps={{ input: { className: "" } }}
      />
    </Fieldset>
  );
}

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16

@layer components {
  [data-uiify-fieldset][data-part="root"] {
    display: grid;
    gap: var(--space-md);
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }

  [data-uiify-fieldset] > [data-part="legend"] {
    padding: 0;
    color: var(--foreground);
    font-weight: var(--weight-medium);
  }
}

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34
35. 35
36. 36
37. 37
38. 38
39. 39
40. 40
41. 41
42. 42
43. 43
44. 44
45. 45
46. 46
47. 47
48. 48
49. 49
50. 50
51. 51
52. 52
53. 53
54. 54
55. 55
56. 56
57. 57
58. 58
59. 59
60. 60
61. 61
62. 62
63. 63
64. 64
65. 65
66. 66
67. 67
68. 68
69. 69
70. 70
71. 71
72. 72
73. 73
74. 74
75. 75
76. 76
77. 77
78. 78
79. 79
80. 80
81. 81
82. 82
83. 83

import { Checkbox, Fieldset, FieldsetLegend } from "@gunkin/uiify";

export default function Example() {
  return (
    <Fieldset className="grid gap-md [min-inline-size:0] m-0 p-0 border-0 border-current border-none">
      <FieldsetLegend className="p-0 text-foreground font-[number:var(--weight-medium)]">
        Contact preferences
      </FieldsetLegend>
      <Checkbox
        className="
          inline-flex items-center gap-sm cursor-pointer select-none text-foreground text-sm
          [line-height:var(--leading-normal)] [&:has(>input:disabled)]:opacity-50
          [&:has(>input:disabled)]:cursor-not-allowed
        "
        id="contact-email"
        label="Email"
        name="contact"
        value="email"
        slotProps={{
          input: {
            className:
              "appearance-none [inline-size:1.25rem] [block-size:1.25rem] m-0 " +
              "border-[length:var(--border-width)] border-solid border-input bg-card " +
              "inline-grid place-content-center cursor-pointer " +
              "[transition:var(--transition-colors)] rounded-xs focus-visible:[outline:none] " +
              "focus-visible:[box-shadow:0_0_0_var(--ring-width)_color-mix(in_oklch,_var(--ring)_20%,_transparent)] " +
              "checked:border-primary checked:bg-primary data-[state=checked]:border-primary " +
              "data-[state=checked]:bg-primary before:content-[''] before:[inline-size:1rem] " +
              "before:[block-size:1rem] before:[transform:scale(0)] " +
              "before:[transition:transform_var(--duration-fast)_var(--ease-out)] " +
              "before:bg-primary-foreground " +
              "before:[clip-path:polygon(28.4%_46.4%,20%_59%,42.8%_80%,80%_33.2%,70.4%_23.6%,42.8%_60.8%)] " +
              "checked:before:[transform:scale(1)] " +
              "data-[state=checked]:before:[transform:scale(1)] indeterminate:border-primary " +
              "indeterminate:bg-primary data-[state=indeterminate]:border-primary " +
              "data-[state=indeterminate]:bg-primary indeterminate:before:[transform:scale(1)] " +
              "indeterminate:before:[clip-path:inset(42%_12%_42%_12%)] " +
              "data-[state=indeterminate]:before:[transform:scale(1)] " +
              "data-[state=indeterminate]:before:[clip-path:inset(42%_12%_42%_12%)] " +
              "disabled:opacity-50 disabled:cursor-not-allowed data-[disabled]:opacity-50 " +
              "data-[disabled]:cursor-not-allowed",
          },
        }}
      />
      <Checkbox
        className="
          inline-flex items-center gap-sm cursor-pointer select-none text-foreground text-sm
          [line-height:var(--leading-normal)] [&:has(>input:disabled)]:opacity-50
          [&:has(>input:disabled)]:cursor-not-allowed
        "
        id="contact-sms"
        label="Text message"
        name="contact"
        value="sms"
        slotProps={{
          input: {
            className:
              "appearance-none [inline-size:1.25rem] [block-size:1.25rem] m-0 " +
              "border-[length:var(--border-width)] border-solid border-input bg-card " +
              "inline-grid place-content-center cursor-pointer " +
              "[transition:var(--transition-colors)] rounded-xs focus-visible:[outline:none] " +
              "focus-visible:[box-shadow:0_0_0_var(--ring-width)_color-mix(in_oklch,_var(--ring)_20%,_transparent)] " +
              "checked:border-primary checked:bg-primary data-[state=checked]:border-primary " +
              "data-[state=checked]:bg-primary before:content-[''] before:[inline-size:1rem] " +
              "before:[block-size:1rem] before:[transform:scale(0)] " +
              "before:[transition:transform_var(--duration-fast)_var(--ease-out)] " +
              "before:bg-primary-foreground " +
              "before:[clip-path:polygon(28.4%_46.4%,20%_59%,42.8%_80%,80%_33.2%,70.4%_23.6%,42.8%_60.8%)] " +
              "checked:before:[transform:scale(1)] " +
              "data-[state=checked]:before:[transform:scale(1)] indeterminate:border-primary " +
              "indeterminate:bg-primary data-[state=indeterminate]:border-primary " +
              "data-[state=indeterminate]:bg-primary indeterminate:before:[transform:scale(1)] " +
              "indeterminate:before:[clip-path:inset(42%_12%_42%_12%)] " +
              "data-[state=indeterminate]:before:[transform:scale(1)] " +
              "data-[state=indeterminate]:before:[clip-path:inset(42%_12%_42%_12%)] " +
              "disabled:opacity-50 disabled:cursor-not-allowed data-[disabled]:opacity-50 " +
              "data-[disabled]:cursor-not-allowed",
          },
        }}
      />
    </Fieldset>
  );
}