nextui/apps/docs/content/components/checkbox-group/controlled-vs-uncontrolled.ts

const App = `import React from "react";
import { Checkbox, Grid } from "@nextui-org/react";

export default function App() {
  const [selected, setSelected] = React.useState(["buenos-aires", "sydney"]);

  return (
    <Grid.Container gap={2}>
      <Grid>
        <Checkbox.Group
          label="Select cities (controlled)"
          color="secondary"
          value={selected}
          onChange={setSelected}
        >
          <Checkbox value="buenos-aires">Buenos Aires</Checkbox>
          <Checkbox value="auckland">Auckland</Checkbox>
          <Checkbox value="sydney">Sydney</Checkbox>
        </Checkbox.Group>
      </Grid>
      <Grid>
        <Checkbox.Group
          label="Select cities (uncontrolled)"
          defaultValue={["buenos-aires", "auckland"]}
        >
          <Checkbox value="buenos-aires">Buenos Aires</Checkbox>
          <Checkbox value="auckland">Auckland</Checkbox>
          <Checkbox value="sydney">Sydney</Checkbox>
        </Checkbox.Group>
      </Grid>
    </Grid.Container>
  );
}`;

const react = {
  "/App.js": App,
};

export default {
  ...react,
};