List

Basic list

• Item 1
• Item 2
• Item 3

<FuiList>
  <FuiListItem value="1">Item 1</FuiListItem>
  <FuiListItem value="2">Item 2</FuiListItem>
</FuiList>

Selection

• Selected item
• Normal item
• Disabled item

Selected: 1

<script setup>
import { ref } from 'vue'
const selected = ref('1')
</script>

<template>
  <FuiList>
    <FuiListItem :value="1" :selected="selected === '1'" @click="selected = '1'">Selected</FuiListItem>
    <FuiListItem :value="2" :selected="selected === '2'" @click="selected = '2'">Normal</FuiListItem>
    <FuiListItem value="3" disabled>Disabled</FuiListItem>
  </FuiList>
</template>

Size

• Large item
• Large item

<FuiList size="large">
  <FuiListItem value="1">Large item</FuiListItem>
</FuiList>

Props

List

Prop	Type	Default	Description
size	small | medium | large	medium	List size
navigationMode	list | composite	list	Navigation mode

ListItem

Prop	Type	Default	Description
value	string	undefined	Item value
disabled	boolean	false	Disabled state
selected	boolean	false	Selected state