Radio
SfRadio provides additional styles for different states of <input type="radio">. It can be used for choosing between a list of values when only one option can be selected at a time.
Examples
Basic Usage
import { component$, useSignal } from '@builder.io/qwik';
import { SfRadio } from 'qwik-storefront-ui';
const radioOptions = [
{
value: 'value-1',
name: 'radio-1',
},
{
value: 'value-2',
name: 'radio-2',
},
];
export default component$(() => {
const checkedStateSignal = useSignal('');
return (
<>
{radioOptions.map(({ name, value }, index) => (
<SfRadio
key={index}
name={name}
value={value}
class="block mb-4"
checked={checkedStateSignal.value === value}
onChange$={(event) => {
checkedStateSignal.value = event.target.value;
}}
/>
))}
</>
);
});Radio with leading control
It's a best practice to use label with your SfRadio component so users can understand what the input is for.
import { component$, useSignal } from '@builder.io/qwik';
import { SfRadio } from 'qwik-storefront-ui';
const radioOptions = [
{
label: 'Label',
value: 'value-1',
name: 'radio-1',
},
{
label: 'Label 2',
value: 'value-2',
name: 'radio-1',
},
];
export default component$(() => {
const checkedStateSignal = useSignal('');
return (
<>
<div class="-mt-4">
{radioOptions.map(({ label, value, name }) => (
<label key={value} class="flex items-center mt-4 cursor-pointer">
<SfRadio
name={name}
value={value}
checked={checkedStateSignal.value === value}
onChange$={(event) => {
checkedStateSignal.value = event.target.value;
}}
/>
<span class="ml-2 text-base font-normal leading-6 font-body">
{label}
</span>
</label>
))}
</div>
<div class="flex justify-between mt-2">
<p class="text-xs text-neutral-500">Help text</p>
</div>
</>
);
});Radio with trailing control
import { component$, useSignal } from '@builder.io/qwik';
import { SfRadio } from 'qwik-storefront-ui';
const radioOptions = [
{
label: 'Label',
value: 'value-1',
name: 'radio-1',
},
{
label: 'Label 2',
value: 'value-2',
name: 'radio-1',
},
];
export default component$(() => {
const checkedStateSignal = useSignal('');
return (
<>
<div class="-mt-4">
{radioOptions.map(({ label, value, name }) => (
<label
key={value}
class="flex flex-row-reverse items-center justify-between mt-4 cursor-pointer"
>
<SfRadio
name={name}
value={value}
checked={checkedStateSignal.value === value}
onChange$={(event) => {
checkedStateSignal.value = event.target.value;
}}
/>
<span class="ml-2 text-base font-normal leading-5 font-body">
{label}
</span>
</label>
))}
</div>
<div class="flex justify-between mt-2 ml-2">
<p class="text-xs text-neutral-500">Help text</p>
</div>
</>
);
});