How to overwrite classes of a checked radio button in a button group

[dneukamm-netze-odr]

I have a button group with multiple outlined RadioButtons. As default, clicked ("checked") radio buttons have css classes which add an outline to the button as defined in file https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/forms/radio-button/theme.ts

import { tv } from "tailwind-variants";

export const radioButton = tv({
  base: "",
  variants: {
    inline: {
      true: "inline-flex",
      false: "flex"
    },
    checked: {
      true: "outline-4 outline-green-500"
    }
  },
  defaultVariants: {
    inline: true
  }
});

I want to overwrite these css classes and set custom ones. E.g. remove this outline and set a colored background.

Is:

Should be:

Ob both screenshots, button one is selected.

How can I accomplish this?

[shinokada]

Show me your code please.

[dneukamm-netze-odr]

This is how it used in the project:

<script>
	import { ButtonGroup, Label, RadioButton } from 'flowbite-svelte';
	let options = $state();
</script>

<Label class="mb-1" for="options">Options</Label>
<ButtonGroup class="w-full">
         <RadioButton
		outline
		class="grow justify-center p-3"
		name="options"
		value="Option 1"
		bind:group={options}
		>Option 1</RadioButton>
        <RadioButton
		outline
		class="grow justify-center p-3"
		name="options"
		value="Option 2"
		bind:group={options}
		>Option 2</RadioButton>
</ButtonGroup>

It is shortened down to the usage itself as I can't show the complete code because of company guidelines

[dneukamm-netze-odr]

I forgot to mention the versions i use:

{
	...
	"devDependencies": {
		...
		"@sveltejs/kit": "^2.20.8",
		"@tailwindcss/vite": "^4.1.5",
		"flowbite": "^3.1.2",
		"flowbite-svelte": "^1.0.0",
		"svelte": "^5.28.2",
		"tailwindcss": "^4.1.5",
		...
	}
	...
}

[shinokada]

Since RadioButton component is using Button component, you need to use color prop.
The following example will be working in v1.0.6.

<ButtonGroup class="w-full">
  <RadioButton
    outline
    color="purple"
    name="options"
    value="Option 1"
    bind:group={options}
  >
    Option 1
  </RadioButton>
  <RadioButton
    outline
    color="red"
    name="options"
    value="Option 2"
    bind:group={options}
  >
  Option 2
  </RadioButton>
</ButtonGroup>

[dneukamm-netze-odr]

That doesn't work for me. On selection and unfocused I always have a green outline independant of color setting. And also a transparent background. Is this because having v1.0.5 and not v1.0.6?

I got it to work in some "ugly" way

<ButtonGroup class="w-full">
  <RadioButton
    outline
    class={{
        "grow justify-center p-3": true,
        "bg-gray-900 text-white outline-none": options === 'Option 1'
    }}
    name="options"
    value="Option 1"
    bind:group={options}
  >
    Option 1
  </RadioButton>
  <RadioButton
    outline
    class={{
        "grow justify-center p-3": true,
        "bg-gray-900 text-white outline-none": options === 'Option 2'
    }}
    name="options"
    value="Option 2"
    bind:group={options}
  >
  Option 2
  </RadioButton>
</ButtonGroup>

[shinokada]

v1.0.7 can use color and checkedClass to style checked state.

<ButtonGroup>
    <RadioButton color="amber" outline checkedClass="outline-4 outline-amber-500" name="options" value="Option 1" bind:group={options}>Option 1</RadioButton>
    <RadioButton color="blue" outline checkedClass="outline-4 outline-blue-500" name="options" value="Option 2" bind:group={options}>Option 2</RadioButton>
</ButtonGroup>

[dneukamm-netze-odr]

Thank you for your efforts. This works as aspected. Great work!