Usage
Default
Set the input's label by using the label prop. Radio buttons with the same name attribute form a group where only one can be selected at a time.
Colors
Use the color prop to customize the component's color.
Variants
Use the variant prop to customize the component's appearance. Available variants are Outline and Ghost.
<script setup lang="ts">
import CLRadioButton from '@codeandfunction/callaloo/CLRadioButton';
import { CLColors, CLColorVariants } from '@codeandfunction/callaloo';
</script>
<template>
<CLRadioButton id="variant-outline" label="Outline" name="variants" value="outline" :color="CLColors.Primary" :variant="CLColorVariants.Outline" checked />
<CLRadioButton id="variant-ghost" label="Ghost" name="variants" value="ghost" :color="CLColors.Primary" :variant="CLColorVariants.Ghost" />
</template>Sizes
Use the size prop to customize the component's size.
Rounded
Use the border-radius prop to customize the border radius. By default, radio buttons are rounded.
States
A radio button can have various states, which can be set via the busy, disabled, and checked props.
<script setup lang="ts">
import CLRadioButton from '@codeandfunction/callaloo/CLRadioButton';
import { CLColors } from '@codeandfunction/callaloo';
</script>
<template>
<CLRadioButton id="state-checked" label="Checked" name="states-1" value="checked" :color="CLColors.Primary" checked />
<CLRadioButton id="state-disabled" label="Disabled" name="states-2" value="disabled" :color="CLColors.Primary" disabled />
<CLRadioButton id="state-busy" label="Busy" name="states-3" value="busy" :color="CLColors.Primary" busy />
</template>Required
Use the required prop to display a red asterisk next to the input's label, indicating that the field is required.
Messages
Use the messages prop to display helpful information or validation messages. The messageType prop controls the message color.
<script setup lang="ts">
import CLRadioButton from '@codeandfunction/callaloo/CLRadioButton';
import { CLColors } from '@codeandfunction/callaloo';
</script>
<template>
<CLRadioButton
id="message1"
label="Option 1"
name="messages"
value="option1"
:color="CLColors.Primary"
:messages="['Please select an option']"
:message-type="CLColors.Info" />
<CLRadioButton
id="message2"
label="Option 2"
name="messages"
value="option2"
:color="CLColors.Primary"
:messages="['This is required']"
:message-type="CLColors.Danger" />
</template>