CheckboxGroup

1"use client";2/** Adapted from HeroUI v3.2.6. SPDX-License-Identifier: Apache-2.0 */3import { Checkbox, CheckboxGroup, TextField } from "@lenso/ui";4import { labelStyles } from "@lenso/tokens/label";5import { descriptionStyles } from "@lenso/tokens/description";6import { checkboxSupportingStyles } from "@lenso/tokens/checkbox";7import { useId } from "react";8import * as stylex from "@stylexjs/stylex";9
10const interests = [11  { value: "coding", label: "Coding", description: "Love building software" },12  { value: "design", label: "Design", description: "Enjoy creating beautiful interfaces" },13  { value: "writing", label: "Writing", description: "Passionate about content creation" },14];15export function Basic() {16  const id = useId();17  return (18    <TextField name="interests">19      <CheckboxGroup aria-labelledby={`${id}-label`} aria-describedby={`${id}-help`}>20        <span id={`${id}-label`} {...stylex.props(labelStyles.label)}>21          Select your interests22        </span>23        <span id={`${id}-help`} {...stylex.props(descriptionStyles.description)}>24          Choose all that apply25        </span>26        {interests.map((interest) => (27          <Checkbox28            key={interest.value}29            value={interest.value}30            aria-label={interest.label}31            aria-describedby={`${id}-${interest.value}`}32          >33            <Checkbox.Content>34              <Checkbox.Control>35                <Checkbox.Indicator />36              </Checkbox.Control>37              {interest.label}38            </Checkbox.Content>39            <span40              id={`${id}-${interest.value}`}41              {...stylex.props(descriptionStyles.description, checkboxSupportingStyles.direct)}42            >43              {interest.description}44            </span>45          </Checkbox>46        ))}47      </CheckboxGroup>48    </TextField>49  );50}

1"use client";2/** Adapted from HeroUI v3.2.6. SPDX-License-Identifier: Apache-2.0 */3import { Checkbox, CheckboxGroup, Surface, TextField } from "@lenso/ui";4import { labelStyles } from "@lenso/tokens/label";5import { descriptionStyles } from "@lenso/tokens/description";6import { checkboxSupportingStyles } from "@lenso/tokens/checkbox";7import { useId } from "react";8import * as stylex from "@stylexjs/stylex";9const styles = stylex.create({10  surface: { width: "100%", borderRadius: "1.5rem", padding: "1.5rem" },11});12export function OnSurface() {13  const labelId = useId();14  return (15    <Surface xstyle={styles.surface}>16      <TextField name="interests">17        <CheckboxGroup18          variant="secondary"19          aria-labelledby={labelId}20          aria-describedby={`${labelId}-help`}21        >22          <span id={labelId} {...stylex.props(labelStyles.label)}>23            Select your interests24          </span>25          <span id={`${labelId}-help`} {...stylex.props(descriptionStyles.description)}>26            Choose all that apply27          </span>28          <Checkbox value="coding" aria-label="Coding" aria-describedby={`${labelId}-coding`}>29            <Checkbox.Content>30              <Checkbox.Control>31                <Checkbox.Indicator />32              </Checkbox.Control>33              Coding34            </Checkbox.Content>35            <span36              id={`${labelId}-coding`}37              {...stylex.props(descriptionStyles.description, checkboxSupportingStyles.direct)}38            >39              Love building software40            </span>41          </Checkbox>42          <Checkbox value="design" aria-label="Design" aria-describedby={`${labelId}-design`}>43            <Checkbox.Content>44              <Checkbox.Control>45                <Checkbox.Indicator />46              </Checkbox.Control>47              Design48            </Checkbox.Content>49            <span50              id={`${labelId}-design`}51              {...stylex.props(descriptionStyles.description, checkboxSupportingStyles.direct)}52            >53              Enjoy creating beautiful interfaces54            </span>55          </Checkbox>56          <Checkbox value="writing" aria-label="Writing" aria-describedby={`${labelId}-writing`}>57            <Checkbox.Content>58              <Checkbox.Control>59                <Checkbox.Indicator />60              </Checkbox.Control>61              Writing62            </Checkbox.Content>63            <span64              id={`${labelId}-writing`}65              {...stylex.props(descriptionStyles.description, checkboxSupportingStyles.direct)}66            >67              Passionate about content creation68            </span>69          </Checkbox>70        </CheckboxGroup>71      </TextField>72    </Surface>73  );74}

1"use client";2/** Adapted from HeroUI v3.2.6. SPDX-License-Identifier: Apache-2.0 */3import { Checkbox, CheckboxGroup, TextField } from "@lenso/ui";4import { labelStyles } from "@lenso/tokens/label";5import { descriptionStyles } from "@lenso/tokens/description";6import { checkboxSupportingStyles } from "@lenso/tokens/checkbox";7import { useId } from "react";8import * as stylex from "@stylexjs/stylex";9export function Disabled() {10  const labelId = useId();11  return (12    <TextField name="disabled-features">13      <CheckboxGroup disabled aria-labelledby={labelId} aria-describedby={`${labelId}-help`}>14        <span id={labelId} {...stylex.props(labelStyles.label)}>15          Features16        </span>17        <span id={`${labelId}-help`} {...stylex.props(descriptionStyles.description)}>18          Feature selection is temporarily disabled19        </span>20        <Checkbox value="feature1" aria-label="Feature 1" aria-describedby={`${labelId}-feature1`}>21          <Checkbox.Content>22            <Checkbox.Control>23              <Checkbox.Indicator />24            </Checkbox.Control>25            Feature 126          </Checkbox.Content>27          <span28            id={`${labelId}-feature1`}29            {...stylex.props(descriptionStyles.description, checkboxSupportingStyles.direct)}30          >31            This feature is coming soon32          </span>33        </Checkbox>34        <Checkbox value="feature2" aria-label="Feature 2" aria-describedby={`${labelId}-feature2`}>35          <Checkbox.Content>36            <Checkbox.Control>37              <Checkbox.Indicator />38            </Checkbox.Control>39            Feature 240          </Checkbox.Content>41          <span42            id={`${labelId}-feature2`}43            {...stylex.props(descriptionStyles.description, checkboxSupportingStyles.direct)}44          >45            This feature is coming soon46          </span>47        </Checkbox>48      </CheckboxGroup>49    </TextField>50  );51}

1"use client";2/** Adapted from HeroUI v3.2.6. SPDX-License-Identifier: Apache-2.0 */3import { Checkbox, CheckboxGroup } from "@lenso/ui";4import { useState } from "react";5import * as stylex from "@stylexjs/stylex";6const styles = stylex.create({7  children: { marginInlineStart: "1.5rem", display: "flex", flexDirection: "column", gap: ".5rem" },8});9export function Indeterminate() {10  const [selected, setSelected] = useState(["coding"]);11  const allOptions = ["coding", "design", "writing"];12  return (13    <div>14      <Checkbox15        indeterminate={selected.length > 0 && selected.length < allOptions.length}16        checked={selected.length === allOptions.length}17        name="select-all"18        onCheckedChange={(checked) => setSelected(checked ? allOptions : [])}19      >20        <Checkbox.Content>21          <Checkbox.Control>22            <Checkbox.Indicator />23          </Checkbox.Control>24          Select all25        </Checkbox.Content>26      </Checkbox>27      <div {...stylex.props(styles.children)}>28        <CheckboxGroup value={selected} onValueChange={setSelected}>29          <Checkbox value="coding">30            <Checkbox.Content>31              <Checkbox.Control>32                <Checkbox.Indicator />33              </Checkbox.Control>34              Coding35            </Checkbox.Content>36          </Checkbox>37          <Checkbox value="design">38            <Checkbox.Content>39              <Checkbox.Control>40                <Checkbox.Indicator />41              </Checkbox.Control>42              Design43            </Checkbox.Content>44          </Checkbox>45          <Checkbox value="writing">46            <Checkbox.Content>47              <Checkbox.Control>48                <Checkbox.Indicator />49              </Checkbox.Control>50              Writing51            </Checkbox.Content>52          </Checkbox>53        </CheckboxGroup>54      </div>55    </div>56  );57}

1"use client";2/** Adapted from HeroUI v3.2.6. SPDX-License-Identifier: Apache-2.0 */3import { Checkbox, CheckboxGroup, TextField } from "@lenso/ui";4import { labelStyles } from "@lenso/tokens/label";5import { useId, useState } from "react";6import * as stylex from "@stylexjs/stylex";7const styles = stylex.create({8  root: { minWidth: "320px" },9  summary: { marginBlock: "1rem", fontSize: ".875rem", color: "var(--muted)" },10});11export function Controlled() {12  const labelId = useId();13  const [selected, setSelected] = useState(["coding", "design"]);14  return (15    <TextField name="skills">16      <CheckboxGroup17        aria-labelledby={labelId}18        xstyle={styles.root}19        value={selected}20        onValueChange={setSelected}21      >22        <span id={labelId} {...stylex.props(labelStyles.label)}>23          Your skills24        </span>25        <Checkbox value="coding">26          <Checkbox.Content>27            <Checkbox.Control>28              <Checkbox.Indicator />29            </Checkbox.Control>30            Coding31          </Checkbox.Content>32        </Checkbox>33        <Checkbox value="design">34          <Checkbox.Content>35            <Checkbox.Control>36              <Checkbox.Indicator />37            </Checkbox.Control>38            Design39          </Checkbox.Content>40        </Checkbox>41        <Checkbox value="writing">42          <Checkbox.Content>43            <Checkbox.Control>44              <Checkbox.Indicator />45            </Checkbox.Control>46            Writing47          </Checkbox.Content>48        </Checkbox>49        <p {...stylex.props(styles.summary)}>Selected: {selected.join(", ") || "None"}</p>50      </CheckboxGroup>51    </TextField>52  );53}

1"use client";2/** Adapted from HeroUI v3.2.6. SPDX-License-Identifier: Apache-2.0 */3import { Button, Checkbox, CheckboxGroup, FieldError, Form, TextField } from "@lenso/ui";4import { labelStyles } from "@lenso/tokens/label";5import { useId } from "react";6import * as stylex from "@stylexjs/stylex";7const styles = stylex.create({8  form: { display: "flex", flexDirection: "column", gap: "1rem", paddingInline: "1rem" },9});10export function Validation() {11  const labelId = useId();12  return (13    <Form14      xstyle={styles.form}15      onSubmit={(e) => {16        e.preventDefault();17        const values = new FormData(e.currentTarget).getAll("preferences");18        alert(`Selected preferences: ${values.join(", ")}`);19      }}20    >21      <TextField22        name="preferences"23        validate={(value) =>24          Array.isArray(value) && value.length > 025            ? null26            : "Please select at least one notification method."27        }28      >29        <CheckboxGroup aria-labelledby={labelId}>30          <span id={labelId} {...stylex.props(labelStyles.label)}>31            Preferences32          </span>33          <Checkbox value="email">34            <Checkbox.Content>35              <Checkbox.Control>36                <Checkbox.Indicator />37              </Checkbox.Control>38              Email notifications39            </Checkbox.Content>40          </Checkbox>41          <Checkbox value="sms">42            <Checkbox.Content>43              <Checkbox.Control>44                <Checkbox.Indicator />45              </Checkbox.Control>46              SMS notifications47            </Checkbox.Content>48          </Checkbox>49          <Checkbox value="push">50            <Checkbox.Content>51              <Checkbox.Control>52                <Checkbox.Indicator />53              </Checkbox.Control>54              Push notifications55            </Checkbox.Content>56          </Checkbox>57        </CheckboxGroup>58        <FieldError>Please select at least one notification method.</FieldError>59      </TextField>60      <Button type="submit">Submit</Button>61    </Form>62  );63}

1"use client";2/** Adapted from HeroUI v3.2.6. SPDX-License-Identifier: Apache-2.0 */3import { Bell, Comment, Envelope } from "@gravity-ui/icons";4import { Checkbox, CheckboxGroup, TextField } from "@lenso/ui";5import { labelStyles } from "@lenso/tokens/label";6import { descriptionStyles } from "@lenso/tokens/description";7import { useId } from "react";8import * as stylex from "@stylexjs/stylex";9const styles = stylex.create({10  wrapper: {11    display: "flex",12    width: "100%",13    flexDirection: "column",14    alignItems: "center",15    gap: "2.5rem",16    paddingInline: "1rem",17    paddingBlock: "2rem",18  },19  section: {20    display: "flex",21    width: "100%",22    minWidth: "320px",23    flexDirection: "column",24    gap: "1rem",25  },26  items: { display: "flex", flexDirection: "column", gap: ".5rem" },27  content: {28    position: "relative",29    display: "flex",30    width: "100%",31    flexDirection: "row",32    alignItems: "flex-start",33    justifyContent: "flex-start",34    gap: "1rem",35    borderRadius: "1.5rem",36    backgroundColor: {37      default: "var(--surface)",38      ":is([data-checked] *)": "color-mix(in oklab, var(--accent) 10%, transparent)",39    },40    paddingInline: "1.25rem",41    paddingBlock: "1rem",42    transition: {43      default: "background-color 150ms ease",44      "@media (prefers-reduced-motion: reduce)": "none",45    },46  },47  control: {48    position: "absolute",49    insetInlineEnd: "1rem",50    top: ".75rem",51    width: "1.25rem",52    height: "1.25rem",53    borderRadius: "9999px",54    "::before": { borderRadius: "9999px" },55  },56  icon: { width: "1.25rem", height: "1.25rem", color: "var(--accent-soft-foreground)" },57  copy: { display: "flex", flexDirection: "column", gap: ".25rem" },58});59export function FeaturesAndAddOns() {60  const labelId = useId();61  const addOns = [62    {63      description: "Receive updates via email",64      icon: Envelope,65      title: "Email Notifications",66      value: "email",67    },68    {69      description: "Get instant SMS notifications",70      icon: Comment,71      title: "SMS Alerts",72      value: "sms",73    },74    {75      description: "Browser and mobile push alerts",76      icon: Bell,77      title: "Push Notifications",78      value: "push",79    },80  ];81  return (82    <div {...stylex.props(styles.wrapper)}>83      <section {...stylex.props(styles.section)}>84        <TextField name="notification-preferences">85          <CheckboxGroup aria-labelledby={labelId} aria-describedby={`${labelId}-help`}>86            <span id={labelId} {...stylex.props(labelStyles.label)}>87              Notification preferences88            </span>89            <span id={`${labelId}-help`} {...stylex.props(descriptionStyles.description)}>90              Choose how you want to receive updates91            </span>92            <div {...stylex.props(styles.items)}>93              {addOns.map((addon) => (94                <Checkbox95                  key={addon.value}96                  value={addon.value}97                  variant="secondary"98                  aria-label={addon.title}99                  aria-describedby={`${labelId}-${addon.value}`}100                >101                  <Checkbox.Content xstyle={styles.content}>102                    <Checkbox.Control xstyle={styles.control}>103                      <Checkbox.Indicator />104                    </Checkbox.Control>105                    <addon.icon {...stylex.props(styles.icon)} aria-hidden="true" />106                    <div {...stylex.props(styles.copy)}>107                      <span>{addon.title}</span>108                      <span109                        id={`${labelId}-${addon.value}`}110                        {...stylex.props(descriptionStyles.description)}111                      >112                        {addon.description}113                      </span>114                    </div>115                  </Checkbox.Content>116                </Checkbox>117              ))}118            </div>119          </CheckboxGroup>120        </TextField>121      </section>122    </div>123  );124}

1"use client";2/** Adapted from HeroUI v3.2.6. SPDX-License-Identifier: Apache-2.0 */3import { Checkbox, CheckboxGroup, TextField } from "@lenso/ui";4import { labelStyles } from "@lenso/tokens/label";5import { descriptionStyles } from "@lenso/tokens/description";6import { checkboxSupportingStyles } from "@lenso/tokens/checkbox";7import { useId } from "react";8import * as stylex from "@stylexjs/stylex";9export function WithCustomIndicator() {10  const labelId = useId();11  return (12    <TextField name="features">13      <CheckboxGroup aria-labelledby={labelId} aria-describedby={`${labelId}-help`}>14        <span id={labelId} {...stylex.props(labelStyles.label)}>15          Features16        </span>17        <span id={`${labelId}-help`} {...stylex.props(descriptionStyles.description)}>18          Select the features you want19        </span>20        <Checkbox21          value="notifications"22          aria-label="Email notifications"23          aria-describedby={`${labelId}-notifications`}24        >25          <Checkbox.Content>26            <Checkbox.Control>27              <Checkbox.Indicator28                render={(props, { checked }) => (29                  <span {...props}>30                    {checked ? (31                      <svg32                        aria-hidden="true"33                        fill="none"34                        stroke="currentColor"35                        strokeLinecap="round"36                        strokeWidth={2}37                        viewBox="0 0 24 24"38                      >39                        <path d="M6 18L18 6M6 6l12 12" />40                      </svg>41                    ) : null}42                  </span>43                )}44              />45            </Checkbox.Control>46            Email notifications47          </Checkbox.Content>48          <span49            id={`${labelId}-notifications`}50            {...stylex.props(descriptionStyles.description, checkboxSupportingStyles.direct)}51          >52            Receive updates via email53          </span>54        </Checkbox>55        <Checkbox56          value="newsletter"57          aria-label="Newsletter"58          aria-describedby={`${labelId}-newsletter`}59        >60          <Checkbox.Content>61            <Checkbox.Control>62              <Checkbox.Indicator63                render={(props, { checked }) => (64                  <span {...props}>65                    {checked ? (66                      <svg67                        aria-hidden="true"68                        fill="none"69                        stroke="currentColor"70                        strokeLinecap="round"71                        strokeWidth={2}72                        viewBox="0 0 24 24"73                      >74                        <path d="M6 18L18 6M6 6l12 12" />75                      </svg>76                    ) : null}77                  </span>78                )}79              />80            </Checkbox.Control>81            Newsletter82          </Checkbox.Content>83          <span84            id={`${labelId}-newsletter`}85            {...stylex.props(descriptionStyles.description, checkboxSupportingStyles.direct)}86          >87            Get weekly newsletters88          </span>89        </Checkbox>90      </CheckboxGroup>91    </TextField>92  );93}

1"use client";2/** Adapted from HeroUI v3.2.6. SPDX-License-Identifier: Apache-2.0 */3import { Checkbox, CheckboxGroup, TextField } from "@lenso/ui";4import { labelStyles } from "@lenso/tokens/label";5import { descriptionStyles } from "@lenso/tokens/description";6import { checkboxSupportingStyles } from "@lenso/tokens/checkbox";7import { useId } from "react";8import * as stylex from "@stylexjs/stylex";9export function RenderFunction() {10  const labelId = useId();11  return (12    <TextField name="interests">13      <CheckboxGroup14        aria-labelledby={labelId}15        aria-describedby={`${labelId}-help`}16        render={(props) => <div {...props} data-custom="foo" />}17      >18        <span id={labelId} {...stylex.props(labelStyles.label)}>19          Select your interests20        </span>21        <span id={`${labelId}-help`} {...stylex.props(descriptionStyles.description)}>22          Choose all that apply23        </span>24        <Checkbox value="coding" aria-label="Coding" aria-describedby={`${labelId}-coding`}>25          <Checkbox.Content>26            <Checkbox.Control>27              <Checkbox.Indicator />28            </Checkbox.Control>29            Coding30          </Checkbox.Content>31          <span32            id={`${labelId}-coding`}33            {...stylex.props(descriptionStyles.description, checkboxSupportingStyles.direct)}34          >35            Love building software36          </span>37        </Checkbox>38        <Checkbox value="design" aria-label="Design" aria-describedby={`${labelId}-design`}>39          <Checkbox.Content>40            <Checkbox.Control>41              <Checkbox.Indicator />42            </Checkbox.Control>43            Design44          </Checkbox.Content>45          <span46            id={`${labelId}-design`}47            {...stylex.props(descriptionStyles.description, checkboxSupportingStyles.direct)}48          >49            Enjoy creating beautiful interfaces50          </span>51        </Checkbox>52        <Checkbox value="writing" aria-label="Writing" aria-describedby={`${labelId}-writing`}>53          <Checkbox.Content>54            <Checkbox.Control>55              <Checkbox.Indicator />56            </Checkbox.Control>57            Writing58          </Checkbox.Content>59          <span60            id={`${labelId}-writing`}61            {...stylex.props(descriptionStyles.description, checkboxSupportingStyles.direct)}62          >63            Passionate about content creation64          </span>65        </Checkbox>66      </CheckboxGroup>67    </TextField>68  );69}

1"use client";2/** Adapted from HeroUI v3.2.6. SPDX-License-Identifier: Apache-2.0 */3import { Checkbox, CheckboxGroup, TextField } from "@lenso/ui";4import { labelStyles } from "@lenso/tokens/label";5import { descriptionStyles } from "@lenso/tokens/description";6import { useId } from "react";7import * as stylex from "@stylexjs/stylex";8const styles = stylex.create({9  root: { gap: ".75rem" },10  item: { marginTop: 0 },11  control: {12    backgroundColor: "var(--success-soft)",13    "::before": {14      backgroundColor: {15        default: "var(--success)",16        ":is([data-slot='checkbox']:hover *)": "var(--success)",17        ":is([data-slot='checkbox'][data-invalid] *)": "var(--success)",18      },19    },20  },21  indicator: { color: "var(--success-foreground)" },22});23const channels = [24  { label: "Email", value: "email" },25  { label: "SMS", value: "sms" },26  { label: "Push", value: "push" },27] as const;28export function CustomStyles() {29  const labelId = useId();30  return (31    <TextField name="notification-channels">32      <CheckboxGroup33        aria-labelledby={labelId}34        aria-describedby={`${labelId}-help`}35        xstyle={styles.root}36        defaultValue={["email"]}37      >38        <span id={labelId} {...stylex.props(labelStyles.label)}>39          Notification channels40        </span>41        <span id={`${labelId}-help`} {...stylex.props(descriptionStyles.description)}>42          Choose how we should reach you for account updates.43        </span>44        {channels.map(({ label, value }) => (45          <Checkbox key={value} value={value} xstyle={styles.item}>46            <Checkbox.Content>47              <Checkbox.Control xstyle={styles.control}>48                <Checkbox.Indicator xstyle={styles.indicator} />49              </Checkbox.Control>50              {label}51            </Checkbox.Content>52          </Checkbox>53        ))}54      </CheckboxGroup>55    </TextField>56  );57}