ToggleGroupFontWeightSelector() — ui Function Reference

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

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ ToggleGroupFontWeightSelector() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/registry/bases/radix/examples/toggle-group-example.tsx lines 484–541

function ToggleGroupFontWeightSelector() {
  const [fontWeight, setFontWeight] = React.useState("normal")
  return (
    <Example title="Font Weight Selector">
      <Field>
        <FieldLabel>Font Weight</FieldLabel>
        <ToggleGroup
          type="single"
          value={fontWeight}
          onValueChange={(value) => setFontWeight(value)}
          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>
  )
}