Form

Appearance

Resources
GitHub

Radio ​

The radio input type is used for single-choice selection from a predefined list of options. It displays a group of radio buttons where only one option can be selected at a time.

Properties ​

Required Properties ​

  • name (string): Unique identifier for the field
  • type (string): Must be 'radio'
  • label (string): Display label for the field
  • options (array): Array of option objects with id and text properties

Optional Properties ​

  • position (string): Layout position ('vertical' or 'horizontal'), defaults to 'vertical'
  • view (string): View type for radio buttons ('default' or 'buttons'), defaults to 'default'
  • disabled (boolean): Whether the field is disabled
  • layout (string): Layout type (default, horizontal)
  • rules (array): Validation rules for the field

Examples ​

Basic Radio Field ​

typescript
{
  name: 'gender',
  type: 'radio',
  label: 'Gender',
  options: [
    { id: 'male', text: 'Male' },
    { id: 'female', text: 'Female' },
    { id: 'other', text: 'Other' }
  ],
  rules: ['required']
}
Gender*

Horizontal Layout ​

typescript
{
  name: 'experience',
  type: 'radio',
  label: 'Experience Level',
  options: [
    { id: 'beginner', text: 'Beginner' },
    { id: 'intermediate', text: 'Intermediate' },
    { id: 'advanced', text: 'Advanced' },
    { id: 'expert', text: 'Expert' }
  ],
  position: 'horizontal',
  rules: ['required']
}
Experience Level*

Subscription Type ​

typescript
{
  name: 'subscription',
  type: 'radio',
  label: 'Subscription Plan',
  options: [
    { id: 'free', text: 'Free Plan' },
    { id: 'basic', text: 'Basic Plan ($9.99/month)' },
    { id: 'premium', text: 'Premium Plan ($19.99/month)' },
    { id: 'enterprise', text: 'Enterprise Plan ($49.99/month)' }
  ],
  rules: ['required']
}
Subscription Plan*

Priority Levels ​

typescript
{
  name: 'priority',
  type: 'radio',
  label: 'Priority Level',
  options: [
    { id: 'low', text: 'Low Priority' },
    { id: 'medium', text: 'Medium Priority' },
    { id: 'high', text: 'High Priority' },
    { id: 'urgent', text: 'Urgent' }
  ],
  rules: ['required']
}
Priority Level*

Payment Method ​

typescript
{
  name: 'paymentMethod',
  type: 'radio',
  label: 'Payment Method',
  options: [
    { id: 'credit', text: 'Credit Card' },
    { id: 'debit', text: 'Debit Card' },
    { id: 'paypal', text: 'PayPal' },
    { id: 'bank', text: 'Bank Transfer' },
    { id: 'crypto', text: 'Cryptocurrency' }
  ],
  rules: ['required']
}
Payment Method*

Language Preference ​

typescript
{
  name: 'language',
  type: 'radio',
  label: 'Preferred Language',
  options: [
    { id: 'en', text: 'English' },
    { id: 'es', text: 'Spanish' },
    { id: 'fr', text: 'French' },
    { id: 'de', text: 'German' },
    { id: 'it', text: 'Italian' },
    { id: 'pt', text: 'Portuguese' }
  ],
  rules: ['required']
}
Preferred Language*

Complex Form with Multiple Radio Inputs ​

typescript
const schema = [
  {
    name: 'gender',
    type: 'radio',
    label: 'Gender',
    options: [
      { id: 'male', text: 'Male' },
      { id: 'female', text: 'Female' },
      { id: 'other', text: 'Other' },
    ],
    rules: ['required'],
  },
  {
    name: 'experience',
    type: 'radio',
    label: 'Experience Level',
    options: [
      { id: 'beginner', text: 'Beginner' },
      { id: 'intermediate', text: 'Intermediate' },
      { id: 'advanced', text: 'Advanced' },
    ],
    position: 'horizontal',
    rules: ['required'],
  },
  {
    name: 'subscription',
    type: 'radio',
    label: 'Subscription Plan',
    options: [
      { id: 'free', text: 'Free Plan' },
      { id: 'basic', text: 'Basic Plan ($9.99/month)' },
      { id: 'premium', text: 'Premium Plan ($19.99/month)' },
    ],
    rules: ['required'],
  },
];
Gender*
Experience Level*
Subscription Plan*

Best Practices ​

  1. Use descriptive option text that clearly explains each choice
  2. Keep options concise but informative
  3. Use horizontal layout for 3-4 options to save space
  4. Use vertical layout for longer option lists
  5. Provide a default selection when appropriate
  6. Group related options logically
  7. Use consistent naming for option IDs
  8. Consider accessibility with clear labels and descriptions