# Ocelot.Social Documentation

Skip to main content

- Introduction
- Neo4J

- Backend

  - GraphQL
  - neo4j-graphql-js

- Webapp (Frontend)

  - Components
  - HTML
  - SCSS
  - Vue

- Testing Guide

  - End-to-end Tests
  - Webapp (Frontend) Tests
  - Backend Tests
- Deployment
- Contributing
- Feature Specification
- Code of Conduct
- Documentation
- License

#

April 5, 2026
About 1 min

On This Page

- Basic usage
- Usage with label
- Bind to a value
- Multiselect
- Options as objects
- Validation
- Select sizes
- Select icons

## Basic usage

    <ds-select :options="['blue', 'red', 'green']" />

## Usage with label

    <ds-select
      label="Color"
      :options="['blue', 'red', 'green']" />

## Bind to a value

Use v-model to bind a value to the select input.

    <template>
      <div>
        <ds-select
          v-model="color"
          :options="['blue', 'red', 'green']"
          placeholder="Color ..."></ds-select>
        <ds-text>Your color: {{ color }}</ds-text>
      </div>
    </template>
    <script>
      export default {
        data() {
          return {
            color: 'blue'
          }
        }
      }
    </script>

## Multiselect

Use the multiple prop to allow the user selecting multiple values.

    <template>
      <div>
        <ds-select
          v-model="color"
          :options="['blue', 'red', 'green']"
          placeholder="Color ..."
          multiple></ds-select>
        <ds-text>Your colors: {{ color }}</ds-text>
      </div>
    </template>
    <script>
      export default {
        data() {
          return {
            color: ['blue', 'red']
          }
        }
      }
    </script>

## Options as objects

Options can be objects. You can define which property to show as the label by defining label-prop. Defaults to "label".

    <template>
      <div>
        <ds-select
          v-model="color"
          :options="colorOptions"
          placeholder="Color ..."></ds-select>
        <ds-text>Selected color: {{ color }}</ds-text>
        <ds-select
          v-model="colors"
          :options="colorOptions"
          placeholder="Colors ..."
          multiple></ds-select>
        <ds-text>Selected colors: {{ colors }}</ds-text>
      </div>
    </template>
    <script>
      export default {
        data() {
          return {
            color: null,
            colors: [],
            colorOptions: [
              {
                label: 'blue',
                value: '#0e17d8'
              },
              {
                label: 'red',
                value: '#d80e3f'
              },
              {
                label: 'green',
                value: '#0ed853'
              }
            ]
          }
        }
      }
    </script>

## Validation

We use async-validator schemas for validation.

If you need to validate more than one field it is better to use the form component.

    <template>
      <div>
        <ds-select
          v-model="color"
          :options="['blue', 'red', 'green']"
          :schema="{type: 'enum', enum: ['green'], message: 'Please choose green :)' }"
          placeholder="Color ..." />
      </div>
    </template>
    <script>
      export default {
        data() {
          return {
            color: ''
          }
        }
      }
    </script>

## Select sizes

    <ds-select placeholder="Small ..." size="small"></ds-select>
    <ds-select placeholder="Base ..."></ds-select>
    <ds-select placeholder="Large ..." size="large"></ds-select>

## Select icons

Add an icon to help the user identify the select fields usage.

    <ds-select
      placeholder="User ..."
      icon="user"></ds-select>
    <ds-select
      placeholder="Day ..."
      icon="clock"></ds-select>
    <ds-select
      placeholder="User ..."
      size="small"
      icon="user"></ds-select>
    <ds-select
      placeholder="User ..."
      size="large"
      icon="user"></ds-select>