Radio 02

<label class="radio-basic">
  <input class="radio-basic__input" type="radio" name="radio-basic" checked />
  <span class="radio-basic__text">テキスト</span>
</label>

/* reset */
:where(label).radio-basic {
  font: inherit;
  cursor: pointer;
}

:where(input).radio-basic__input {
  box-sizing: border-box;
  font: inherit;
  appearance: none;
}

/* snippet */
.radio-basic {
  --radio-border: #e7e7e7;
  --radio-text-color: #364153;
  --radio-background: #fff;
  --radio-accent: #2b36f5;
  --radio-focus-color: var(--radio-accent);

  display: inline-flex;
  column-gap: 10px;
  align-items: center;
  font-size: 14px;
  line-height: 1.6;
  color: var(--radio-text-color);
}

.radio-basic__input {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  cursor: pointer;
  background-color: var(--radio-background);
  border: 1px solid var(--radio-border);
  border-radius: calc(infinity * 1px);

  &:checked {
    background-color: var(--radio-accent);
    background-image: radial-gradient(
      circle,
      #fff 0,
      #fff 35%,
      transparent 36%
    );
    border-color: var(--radio-accent);
  }

  &:focus:not(:focus-visible) {
    outline: none;
  }

  &:focus-visible {
    outline: 2px solid var(--radio-focus-color);
    outline-offset: 2px;
  }
}

<div class="radio-group">
  <label class="radio-group__item">
    <input
      class="radio-group__input"
      type="radio"
      name="radio-group"
      value="option-1"
      checked
    />
    <span class="radio-group__text">テキスト1</span>
  </label>
  <label class="radio-group__item">
    <input
      class="radio-group__input"
      type="radio"
      name="radio-group"
      value="option-2"
    />
    <span class="radio-group__text">テキスト2</span>
  </label>
  <label class="radio-group__item">
    <input
      class="radio-group__input"
      type="radio"
      name="radio-group"
      value="option-3"
    />
    <span class="radio-group__text">テキスト3</span>
  </label>
</div>

/* reset */
:where(label).radio-group__item {
  font: inherit;
  cursor: pointer;
}

:where(input).radio-group__input {
  box-sizing: border-box;
  font: inherit;
  appearance: none;
}

/* snippet */
.radio-group {
  --radio-border: #e7e7e7;
  --radio-text-color: #364153;
  --radio-background: #fff;
  --radio-accent: #2b36f5;
  --radio-focus-color: var(--radio-accent);

  display: grid;
  row-gap: 12px;
}

.radio-group__item {
  display: inline-flex;
  column-gap: 10px;
  align-items: center;
  font-size: 14px;
  line-height: 1.6;
  color: var(--radio-text-color);
}

.radio-group__input {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  cursor: pointer;
  background-color: var(--radio-background);
  border: 1px solid var(--radio-border);
  border-radius: calc(infinity * 1px);

  &:checked {
    background-color: var(--radio-accent);
    background-image: radial-gradient(
      circle,
      #fff 0,
      #fff 35%,
      transparent 36%
    );
    border-color: var(--radio-accent);
  }

  &:focus:not(:focus-visible) {
    outline: none;
  }

  &:focus-visible {
    outline: 2px solid var(--radio-focus-color);
    outline-offset: 2px;
  }
}