Skip to content
tanthammar edited this page Nov 18, 2020 · 8 revisions

Radio

Extends BaseField

Additional methods

->options($options)

  • A list or flat key => value based Array, Collection or Closure.
  • @param array|\Closure|\Illuminate\Support\Collection $options
  • OBSERVE: if you use a callable, it will be executed on EVERY re-render of the component! Maybe you should consider setting the $options in mount() instead?
  • You can use a component method that returns an array; ->options($this->someMethod())

Examples

/**
 * Radio, associative array
 */
 $options = ['Wifi' => 'wf', 'Bluetooth' => 'bl', 'Ethernet' => 'eth'];
return Radio::make('Radio')
    ->options($options)
    ->rules([Rule::in(array_values($options))])
    ->default('wf');
/**
 * Radio where labels = key
 */
$options = ['Wifi', 'Bluetooth', 'Ethernet'];
return Radio::make('Radio')
    ->options($options)
    ->rules([Rule::in($options)])
    ->default('Wifi');

Blade component

@foreach($field->options as $value => $label)
    <x-tall-radio
        :field="$field"
        :value="$value"
        :label="$label"
        :options-idx="$field->name.$loop->index" />
@endforeach

Styling

Extend Blade component (or override in config file)

Tanthammar\TallForms\Components\Radio::class

Theme

    /* Radio */
    /* If you want to change the color, see tailwind custom form documentation */
    .tf-radio {
        @apply mt-1 h-4 w-4;
    }
    .tf-radio-label {
        @apply text-sm text-gray-900;
    }
    .tf-radio-label-spacing {
        @apply ml-2 block;
    }
Clone this wiki locally