ToggleGroupFontWeightSelector() — ui Function Reference

Architecture documentation for the ToggleGroupFontWeightSelector() function in toggle-group-example.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ ToggleGroupFontWeightSelector() — ui Function Reference

Dependency Diagram

graph TD
  74744ae1_66d7_f3a5_66a7_ca759f2303de["ToggleGroupFontWeightSelector()"]
  7cfec362_e6dc_17ef_efcb_b8f12bc65346["toggle-group-example.tsx"]
  74744ae1_66d7_f3a5_66a7_ca759f2303de -->|defined in| 7cfec362_e6dc_17ef_efcb_b8f12bc65346
  style 74744ae1_66d7_f3a5_66a7_ca759f2303de fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/base/examples/toggle-group-example.tsx lines 473–529

function ToggleGroupFontWeightSelector() {
  const [fontWeight, setFontWeight] = React.useState("normal")
  return (
    <Example title="Font Weight Selector">
      <Field>
        <FieldLabel>Font Weight</FieldLabel>
        <ToggleGroup
          value={[fontWeight]}
          onValueChange={(value) => setFontWeight(value[0])}
          variant="outline"
          spacing={2}
          size="lg"
        >
          <ToggleGroupItem
            value="light"
            aria-label="Light"
            className="flex size-16 flex-col items-center justify-center rounded-xl"
          >
            <span className="text-2xl leading-none font-light">Aa</span>
            <span className="text-muted-foreground text-xs">Light</span>
          </ToggleGroupItem>
          <ToggleGroupItem
            value="normal"
            aria-label="Normal"
            className="flex size-16 flex-col items-center justify-center rounded-xl"
          >
            <span className="text-2xl leading-none font-normal">Aa</span>
            <span className="text-muted-foreground text-xs">Normal</span>
          </ToggleGroupItem>
          <ToggleGroupItem
            value="medium"
            aria-label="Medium"
            className="flex size-16 flex-col items-center justify-center rounded-xl"
          >
            <span className="text-2xl leading-none font-medium">Aa</span>
            <span className="text-muted-foreground text-xs">Medium</span>
          </ToggleGroupItem>
          <ToggleGroupItem
            value="bold"
            aria-label="Bold"
            className="flex size-16 flex-col items-center justify-center rounded-xl"
          >
            <span className="text-2xl leading-none font-bold">Aa</span>
            <span className="text-muted-foreground text-xs">Bold</span>
          </ToggleGroupItem>
        </ToggleGroup>
        <FieldDescription>
          Use{" "}
          <code className="bg-muted rounded-md px-1 py-0.5 font-mono">
            font-{fontWeight}
          </code>{" "}
          to set the font weight.
        </FieldDescription>
      </Field>
    </Example>
  )
}