Saltearse al contenido

Radio Group

Esta página aún no está disponible en tu idioma.

A custom radio group component with support for sizes and colors. Form compatible.

Label

You can change a radio group to be displayed horizontally by using the horizontal prop:

Label

You can set a default selected option via the defaultValue prop.

Default Selected

The radio group component supports all default colorways.

Default
Primary
Success
Warning
Danger

You can disable either the entire radio group (by passing the disabled prop) or a single option via the options. The example below shows how to do the latter:

One option disabled

Inputs have full form support. You can use the isRequired and name attributes as needed.

The first one does what it says it does, while the latter sets the name attribute so you can access the input in, for example, the FormData returned by a submission. Here’s an example showing how to set both of them:

RadioGroupFormExample.astro
---
import { RadioGroup } from '@studiocms/ui/components';
---
<RadioGroup
label='Required & Custom Name'
isRequired
name='required-radio'
options={[
{ label: 'Option 1', value: 'opt-1' },
{ label: 'Option 2', value: 'opt-2' }
]}
/>