mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
As identified in #2131, `focus` and `blur` events should be forwarded to the underlying `RadioButton` element.
38 lines
1.1 KiB
Svelte
38 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import { RadioButton } from "carbon-components-svelte";
|
|
import type { ComponentProps } from "svelte";
|
|
|
|
export let value: ComponentProps<RadioButton>["value"] = "";
|
|
export let checked: ComponentProps<RadioButton>["checked"] = false;
|
|
export let disabled: ComponentProps<RadioButton>["disabled"] = false;
|
|
export let required: ComponentProps<RadioButton>["required"] = false;
|
|
export let labelPosition: ComponentProps<RadioButton>["labelPosition"] =
|
|
"right";
|
|
export let labelText: ComponentProps<RadioButton>["labelText"] = "Option 1";
|
|
export let hideLabel: ComponentProps<RadioButton>["hideLabel"] = false;
|
|
export let id: ComponentProps<RadioButton>["id"] = "ccs-test";
|
|
export let name: ComponentProps<RadioButton>["name"] = "test-group";
|
|
export let ref: ComponentProps<RadioButton>["ref"] = null;
|
|
</script>
|
|
|
|
<RadioButton
|
|
bind:value
|
|
{checked}
|
|
{disabled}
|
|
{required}
|
|
{labelPosition}
|
|
{labelText}
|
|
{hideLabel}
|
|
{id}
|
|
{name}
|
|
{ref}
|
|
on:focus={() => {
|
|
console.log("focus");
|
|
}}
|
|
on:blur={() => {
|
|
console.log("blur");
|
|
}}
|
|
on:change={() => {
|
|
console.log("change");
|
|
}}
|
|
/>
|