Dual List Boxes Forms - Axelit

Dual List Boxes

Select by class

Available options

Selected options


<TransferListBox
  leftItems={['One', 'Two', 'Three']}
  rightItems={selected}
  setRightItems={setSelected}
  addText="Add"
  removeText="Remove"
  addAllText="Add All"
  removeAllText="Remove All"
/>

Select by class

Selected element :

Nothing yet

Available options

Selected options


<TransferListBox
  leftItems={['One', 'Two', 'Three']}
  rightItems={selected1}
  setRightItems={setSelected1}
  leftTitle="Available numbers"
  rightTitle="Selected numbers"
  addText=">"
  removeText="<"
  addAllText=">>"
  removeAllText="<<"
/>

Select by class

Selected element :

Nothing yet

Available options

Selected options


<TransferListBox
  leftItems={['One', 'Two', 'Three']}
  rightItems={selected2}
  setRightItems={setSelected2}
/>

Show the sort buttons

Available options

Selected options


<TransferListBox
  leftItems={['One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine']}
  rightItems={selected3}
  setRightItems={setSelected3}
  leftTitle="Available options"
  rightTitle="Selected options"
  addText="🤌"
  addAllText="🤌"
  removeText="🤌"
  removeAllText="🤌"
/>

All options

Option	Default	Excepted values	Explanation
enableDoubleClick	`true`	`boolean`	If double clicking a list item should move it between lists.
showAddButton	`true`	`boolean`	If the "Add" button should be shown.
showRemoveButton	`true`	`boolean`	If the "Remove" button should be shown.
showAddAllButton	`true`	`boolean`	If the "Add All" button should be shown.
showRemoveAllButton	`true`	`boolean`	If the "Remove All" button should be shown.
availableTitle	`"Available options"`	`string`	Title shown above the left (available) list.
selectedTitle	`"Selected options"`	`string`	Title shown above the right (selected) list.
addButtonText	`"Add"`	`string`	Text displayed in the "Add" button.
removeButtonText	`"Remove"`	`string`	Text displayed in the "Remove" button.
addAllButtonText	`"Add All"`	`string`	Text displayed in the "Add All" button.
removeAllButtonText	`"Remove All"`	`string`	Text displayed in the "Remove All" button.
searchPlaceholder	`"Search..."`	`string`	Placeholder text for search inputs.
options	`undefined`	`string[]`	Array of option names used to populate the lists.

Public functions

Function name	Arguments	Explanation
addOption	option	Add a single option to the left list.
addOptions	options	Add multiple options to the left list.
changeSelected	option	Toggle the selected state of the given option.
actionAllSelected		Select all items in the left list.
actionAllDeselected		Deselect all items from the right list.
redraw		Redraw the lists (re-renders component).

<TransferListBox leftItems={['One', 'Two', 'Three']} rightItems={selected} setRightItems={setSelected} addText="Add" removeText="Remove" addAllText="Add All" removeAllText="Remove All" />

<TransferListBox leftItems={['One', 'Two', 'Three']} rightItems={selected1} setRightItems={setSelected1} leftTitle="Available numbers" rightTitle="Selected numbers" addText=">" removeText="<" addAllText=">>" removeAllText="<<" />

<TransferListBox leftItems={['One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine']} rightItems={selected3} setRightItems={setSelected3} leftTitle="Available options" rightTitle="Selected options" addText="🤌" addAllText="🤌" removeText="🤌" removeAllText="🤌" />

Option

Default

Excepted values

Explanation

enableDoubleClick

true

boolean

If double clicking a list item should move it between lists.

showAddButton

true

boolean

If the "Add" button should be shown.

showRemoveButton

true

boolean

If the "Remove" button should be shown.

showAddAllButton

true

boolean

If the "Add All" button should be shown.

showRemoveAllButton

true

boolean

If the "Remove All" button should be shown.

availableTitle

"Available options"

string

Title shown above the left (available) list.

selectedTitle

"Selected options"

string

Title shown above the right (selected) list.

addButtonText

"Add"

string

Text displayed in the "Add" button.

removeButtonText

"Remove"

string

Text displayed in the "Remove" button.

addAllButtonText

"Add All"

string

Text displayed in the "Add All" button.

removeAllButtonText

"Remove All"

string

Text displayed in the "Remove All" button.

searchPlaceholder

"Search..."

string

Placeholder text for search inputs.

options

undefined

string[]

Array of option names used to populate the lists.

Function name

Arguments

Explanation

addOption

option

Add a single option to the left list.

addOptions

options

Add multiple options to the left list.

changeSelected

option

Toggle the selected state of the given option.

actionAllSelected

Select all items in the left list.

actionAllDeselected

Deselect all items from the right list.

redraw

Redraw the lists (re-renders component).