Add Your First Firstlight Component

This tutorial adds a native Segmented control for choosing a queue. The same EDGE markup renders as a platform-appropriate control on iOS and Android.

Define the state

Add the selected value and stable value-to-label options to your EDGE component:

public string $queue = 'mine';

public array $queueOptions = [
    'mine' => 'Mine',
    'all' => 'All',
];

The array keys are the public values stored in $queue; the labels are display text.

Render the control

Bind the property with native:model:

<firstlight:segmented
    :options="$queueOptions"
    native:model="queue"
    label="Queue"
    helper="Choose the active queue."
/>

Run the application natively. A selection emits its stable value to PHP, and the published $queue value determines the visible selection.

Handle a selection explicitly

Use @change when the selection should call a method instead of directly synchronising a property:

<firstlight:segmented
    :options="$queueOptions"
    :value="$queue"
    @change="selectQueue"
    label="Queue"
/>

The method receives the selected string value. See the Segmented reference for integer values, disabled choices, accessibility, and validation rules.