Deepyr Documentation

Radio

Radio(value: 1, groupValue: 1, name: 'radio-1', onSelect: (val) => setState(() => _selectedValue = val)),
Radio(value: 2, groupValue: 1, name: 'radio-1', onSelect: (val) => setState(() => _selectedValue = val)),

Radio sizes

Radio(value: 1, groupValue: 1, name: 'radio-2', onSelect: null, style: [Radio.xs]),
Radio(value: 1, groupValue: 1, name: 'radio-2.1', onSelect: null, style: [Radio.sm]),
Radio(value: 1, groupValue: 1, name: 'radio-2.2', onSelect: null, style: [Radio.md]),
Radio(value: 1, groupValue: 1, name: 'radio-2.3', onSelect: null, style: [Radio.lg]),
Radio(value: 1, groupValue: 1, name: 'radio-2.4', onSelect: null, style: [Radio.xl]),

Neutral color

// This requires a stateful parent to manage the selected value.
Radio(value: 1, groupValue: 1, name: 'radio-3', onSelect: (val){}, style: [Radio.neutral]),
Radio(value: 2, groupValue: 1, name: 'radio-3', onSelect: (val){}, style: [Radio.neutral]),

Primary color

// This requires a stateful parent to manage the selected value.
Radio(value: 1, groupValue: 1, name: 'radio-4', onSelect: (val){}, style: [Radio.primary]),
Radio(value: 2, groupValue: 1, name: 'radio-4', onSelect: (val){}, style: [Radio.primary]),

Secondary color

// This requires a stateful parent to manage the selected value.
Radio(value: 1, groupValue: 1, name: 'radio-5', onSelect: (val){}, style: [Radio.secondary]),
Radio(value: 2, groupValue: 1, name: 'radio-5', onSelect: (val){}, style: [Radio.secondary]),

Accent color

// This requires a stateful parent to manage the selected value.
Radio(value: 1, groupValue: 1, name: 'radio-6', onSelect: (val){}, style: [Radio.accent]),
Radio(value: 2, groupValue: 1, name: 'radio-6', onSelect: (val){}, style: [Radio.accent]),

Success color

// This requires a stateful parent to manage the selected value.
Radio(value: 1, groupValue: 1, name: 'radio-7', onSelect: (val){}, style: [Radio.success]),
Radio(value: 2, groupValue: 1, name: 'radio-7', onSelect: (val){}, style: [Radio.success]),

Warning color

// This requires a stateful parent to manage the selected value.
Radio(value: 1, groupValue: 1, name: 'radio-8', onSelect: (val){}, style: [Radio.warning]),
Radio(value: 2, groupValue: 1, name: 'radio-8', onSelect: (val){}, style: [Radio.warning]),

Info color

// This requires a stateful parent to manage the selected value.
Radio(value: 1, groupValue: 1, name: 'radio-9', onSelect: (val){}, style: [Radio.info]),
Radio(value: 2, groupValue: 1, name: 'radio-9', onSelect: (val){}, style: [Radio.info]),

Error color

// This requires a stateful parent to manage the selected value.
Radio(value: 1, groupValue: 1, name: 'radio-10', onSelect: (val){}, style: [Radio.error]),
Radio(value: 2, groupValue: 1, name: 'radio-10', onSelect: (val){}, style: [Radio.error]),

Disabled

Radio(value: 1, groupValue: 1, name: 'radio-11', onSelect: null, disabled: true),
Radio(value: 2, groupValue: 1, name: 'radio-11', onSelect: null, disabled: true),

Radio with custom colors

Radio<String>(
  value: 'red',
  groupValue: _selectedValue,
  name: 'radio-custom-color',
  onSelect: (val) => setState(() => _selectedValue = val),
  classes: 'bg-red-100 border-red-300 checked:bg-red-200 checked:text-red-600 checked:border-red-600',
),
Radio<String>(
  value: 'blue',
  groupValue: _selectedValue,
  name: 'radio-custom-color',
  onSelect: (val) => setState(() => _selectedValue = val),
  classes: 'bg-blue-100 border-blue-300 checked:bg-blue-200 checked:text-blue-600 checked:border-blue-600',
),

State Management (Controlled Component)

A Radio component is controlled. Its state must be managed by a parent using `groupValue` and `onSelect`. Using a generic type like an enum ensures type safety.

vanilla chocolate strawberry

Selected: vanilla

// 1. Define a type for your radio group values (enum is great for this).
enum Flavor { vanilla, chocolate, strawberry }

// 2. Create a stateful parent component to manage the state.
class MyRadioGroup extends StatefulComponent {
  @override
  State<MyRadioGroup> createState() => _MyRadioGroupState();
}

class _MyRadioGroupState extends State<MyRadioGroup> {
  // 3. Hold the currently selected value in the state.
  Flavor _selectedFlavor = Flavor.vanilla;

  @override
  Component build(BuildContext context) {
    // 4. Render a Radio for each option.
    for (final flavor in Flavor.values) {
      return label(classes: 'label cursor-pointer justify-start gap-2', [
        // 5. Provide the value, groupValue, name, and onSelect callback.
        Radio<Flavor>(
          // The unique value this radio button represents.
          value: flavor,
          // The currently selected value for the entire group.
          groupValue: _selectedFlavor,
          // The name must be the same for all radios in the group.
          name: 'flavor-group',
          // The callback updates the parent's state, triggering a rebuild.
          onSelect: (newValue) {
            // 6. Update the state when a new value is selected.
            setState(() => _selectedFlavor = newValue);
          },
          style: [Radio.primary],
        ),
        span([text(flavor.name)], classes: 'label-text'),
      ]);
    }
  }
}