My App
Components

Radio Button

A control that allows the user to select one option from a set.

Select a plan

Choose the plan that best fits your needs.

Usage

planSelector.tsx
import { RadioButton, RadioGroup, Label } from "@uj-vilag/dap-components";

export default function PlanSelector() {
  return (
    <Label
      labelText="Select a plan"
      mode="legend"
      className="gap-dap-400"
      helperText="Choose the plan that best fits your needs."
    >
      <RadioGroup>
        <RadioButton value="option1" background id="basic-plan">
          <Label
            labelText="Basic Plan - $9.99/month"
            variant="subtle"
            htmlFor="basic-plan"
          />
        </RadioButton>
        <RadioButton value="option2" background id="premium-plan">
          <Label
            labelText="Premium Plan - $19.99/month"
            variant="subtle"
            htmlFor="premium-plan"
          />
        </RadioButton>
      </RadioGroup>
    </Label>
  );
}

Props

This component is built on top of Radix UI's RadioGroup.Item component. See the documentation for more details.

Prop

Type

Radio Group

The <RadioGroup> component is built on top of Radix UI's RadioGroup.Root component. See the documentation for more details.

The component preapplies the necessary layout styles.

Examples

Default

Select an option
defaultRadio.tsx
import { RadioButton, RadioGroup, Label } from "@uj-vilag/dap-components";

export default function DefaultRadio() {
  return (
    <Label
      labelText="Select an option"
      mode="legend"
      className="gap-dap-400 w-100"
    >
      <RadioGroup>
        <RadioButton value="option1" id="basic-plan">
          <Label
            labelText="Basic Plan - $9.99/month"
            variant="subtle"
            htmlFor="basic-plan"
          />
        </RadioButton>
        <RadioButton value="option2" id="premium-plan" aria-invalid>
          <Label
            labelText="Premium Plan - $19.99/month"
            variant="subtle"
            htmlFor="premium-plan"
          />
        </RadioButton>
        <RadioButton value="option3" id="enterprise-plan" disabled>
          <Label
            labelText="Enterprise Plan - Contact us"
            variant="subtle"
            htmlFor="enterprise-plan"
          />
        </RadioButton>
      </RadioGroup>
    </Label>
  );
}

Background & Border

Select an option
backgroundRadioGroup.tsx
import { RadioButton, RadioGroup, Label } from "@uj-vilag/dap-components";

export default function BackgroundRadioGroup() {
  return (
    <Label labelText="Select an option" mode="legend">
      <RadioGroup>
        <RadioButton value="option1" background size="large" id="basic-plan">
          <Label
            labelText="Basic Plan - $9.99/month"
            variant="subtle"
            htmlFor="basic-plan"
          />
        </RadioButton>
        <RadioButton
          value="option2"
          background
          border
          size="large"
          id="premium-plan"
          aria-invalid
        >
          <Label
            labelText="Premium Plan - $19.99/month"
            variant="subtle"
            htmlFor="premium-plan"
          />
        </RadioButton>
        <RadioButton
          value="option3"
          background
          size="large"
          id="enterprise-plan"
          disabled
        >
          <Label
            labelText="Enterprise Plan - Contact us"
            variant="subtle"
            htmlFor="enterprise-plan"
          />
        </RadioButton>
      </RadioGroup>
    </Label>
  );
}

Sizes

The size of the radio button card mainly depends on the size of the label text, the radio button itself only adjusts the padding around it.

radioButtonSizes.tsx
import { RadioButton, RadioGroup, Label } from "@uj-vilag/dap-components";

export default function RadioButtonSizes() {
  return (
    <RadioGroup>
      <RadioButton value="option3" background size="large" id="enterprise-plan">
        <Label
          labelText="Large radio button"
          variant="subtle"
          htmlFor="enterprise-plan"
          size="large"
        />
      </RadioButton>
      <RadioButton value="option2" background size="small" id="premium-plan">
        <Label
          labelText="Small radio button"
          variant="subtle"
          htmlFor="premium-plan"
          size="small"
        />
      </RadioButton>
      <RadioButton value="option1" background size="xSmall" id="basic-plan">
        <Label
          labelText="xSmall radio button"
          variant="subtle"
          htmlFor="basic-plan"
          size="xSmall"
        />
      </RadioButton>
    </RadioGroup>
  );
}

Recommendations

The focus ring by default consists of a white and a colored ring, but when the radio button is not selected but focused, the radio button card might appear larger than it should.

To avoid this change the inner focus ring styles to match the color of the background:
className="focus-within:ring-offset-{background-color}"

radioFocus.tsx
import { RadioButton, RadioGroup, Label } from "@uj-vilag/dap-components";

export default function RadioFocus() {
  return (
    <div className="p-28 flex-col gap-dap-300 bg-dap-bg-neutral-disabled">
      <RadioGroup>
        <RadioButton
          value="option1"
          background
          className="focus-within:ring-offset-dap-bg-neutral-disabled"
          id="focus-recommendation-fixed"
        >
          <Label
            labelText="Fixed focus example"
            variant="subtle"
            htmlFor="focus-recommendation-fixed"
          />
        </RadioButton>
      </RadioGroup>
    </div>
  );
}

Number Field

Displays a number input field.

Select

Displays a list of options for the user to choose from, triggered by a button.

On this page

UsagePropsRadio GroupExamplesDefaultBackground & BorderSizesRecommendations