Pick List | Neural Native

Import

component.ts

import { NeuPickListComponent } from '@neural-ui/native/pick-list';

Examples

Import ExampleComponent into its parent and place <app-example /> inside your application’s root neu-theme. The preview supplies the device frame and safe areas; use the root setup from Installation in your app.

Make room for what matters

Build a release plan: add projects with +, change their priority with the arrows and return them to the available list with ×.

View and copy the complete example

basic.component.ts

import { Component, signal } from '@angular/core';
import { NeuPickListComponent } from '@neural-ui/native/pick-list';
import { View, Text, ScrollView } from '@ng-native/components';
import type { NeuOption } from '@neural-ui/native';

@Component({
  selector: 'app-example',
  imports: [NeuPickListComponent, View, Text, ScrollView],
  template: `
    <scroll-view class="product-scroll" keyboardShouldPersistTaps="handled" [showsVerticalScrollIndicator]="true"><view class="product-stack"><view class="product-section"><text class="product-title" accessibilityRole="header">Make room for what matters</text><text class="product-caption">A clear order for the next release</text></view><view class="product-section"><view class="release-planner">
      <text class="planner-hint">Use + to include a project, arrows to reorder and × to return it.</text>
      <neu-pick-list label="Release priorities" [options]="projects" [(value)]="included" selectedLabel="In the release" availableLabel="Available to add" emptySelectedLabel="Add a project from the available list." emptyAvailableLabel="All projects are in the release." />
    </view></view></view></scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }

:host { flex: 1; flex-shrink: 1; min-height: 0; }
.product-scroll { flex: 1; flex-shrink: 1; height: 0px; min-height: 0; }
.product-stack { gap: 24px; padding-bottom: 20px; }
.product-section { gap: 12px; }
.product-row { flex-direction: row; align-items: center; gap: 12px; }
.product-copy { flex: 1; min-width: 0; gap: 4px; }
.product-title { color: var(--neu-text, #172033); font-size: 24px; line-height: 30px; font-weight: 600; }
.product-heading { color: var(--neu-text, #172033); font-size: 17px; line-height: 23px; font-weight: 600; }
.product-caption { color: var(--neu-muted, #596477); font-size: 14px; line-height: 20px; }
.product-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.product-surface { gap: 16px; padding: 16px; border-radius: 16px; background-color: var(--neu-surface, #ffffff); border-width: 1px; border-color: var(--neu-border, #a5afbf); }
.release-planner { gap: 16px; } .planner-hint { font-size: 14px; line-height: 20px; color: var(--neu-muted, #596477); }
  `,
})
export class ExampleComponent {
  readonly projects: readonly NeuOption[] = [
    { id: 'mobile', label: 'Mobile launch', description: 'Ship the new app' },
    { id: 'website', label: 'Website refresh', description: 'Update the documentation' },
    { id: 'research', label: 'Customer research', description: 'Review the interviews' },
  ];
  readonly included = signal<readonly string[]>(['mobile', 'website']);
}

Interactive playground

Change the settings and try the result.

Device captures shown in English.

Pick List · android · native capture — **Android**Native screenshot

Pick List · ios · native capture — **iOS**Native screenshot

API reference

Inputs

Name	Type	Default	Binding	Description
label	string	Required	Input	Human-readable name for the control, action or group.
options	readonly NeuOption[]	[]	Input	Available choices. Selected values refer to option IDs, not their displayed labels.
disabled	boolean	false	Input	Disables user interaction. Values can still be supplied by the application.
readonly	boolean	false	Input	Prevents user editing or selection while retaining the current value.
selectedLabel	string	'Selected'	Input	Text or accessible name used for selected items. It does not perform the action by itself.
availableLabel	string	'Available'	Input	Text or accessible name used for available items. It does not perform the action by itself.
upLabel	string	'Move up'	Input	Text or accessible name used for move up. It does not perform the action by itself.
downLabel	string	'Move down'	Input	Text or accessible name used for move down. It does not perform the action by itself.
removeLabel	string	'Remove'	Input	Text or accessible name used for remove. It does not perform the action by itself.
addLabel	string	'Add'	Input	Accessible prefix for adding an available item to the selected list.
emptySelectedLabel	string	'No items selected'	Input	Message displayed while the selected list is empty.
emptyAvailableLabel	string	'All items selected'	Input	Message displayed when no available options remain.

Models

Name	Type	Default	Binding	Description
value	readonly string[]	[]	Model · two-way	Current edited value or selected ID(s), using the declared type. Bind a writable signal with [(value)].

Outputs

Name	Payload	When it emits
valueChange	readonly string[]	Emits the updated value value. [(value)] binds this output together with its model input.
touch	void	Reports user interaction to the surrounding form or application.

Model state

Bind the signal with [(modelName)] without calling it. Use modelName() to read its value.

model-fields.ts

import { signal } from '@angular/core';

// Fields inside your component class
readonly value = signal<readonly string[]>([]);

Types and data interfaces

Use the imports in your application. The definitions below are provided for reference.

NeuOption

NeuOption.ts

import type { NeuOption } from '@neural-ui/native';

// Public definition for reference only. Import this type; do not redeclare it.
export interface NeuOption {
    readonly id: string;
    readonly label: string;
    readonly description?: string;
    readonly disabled?: boolean;
}

Field	Type	Requirement	Meaning
id	string	Required	Stable, unique identifier used for tracking and selection.
label	string	Required	Human-readable item name.
description	string	Optional	Optional supporting text; rendering depends on the control.
disabled	boolean	Optional	Prevents activating or selecting this item.