Controls

Boolean

For boolean parameters, checkbox field component will be provided.

const { value } = useControls({
  awiwi: true,
})

awiwi: true

🍰

awiwi

Text

For string parameters, text field component will be provided by default

const { value } = useControls({
  message: 'I`m a pretty penguin',
}

I`m a pretty penguin

🍰

message

Number

For number parameters, number field component will be provided by default

const { value } = useControls({
  stars: 100,
})

100 ⭐️

🍰

stars

Color

For color parameters, color field component will be provided by default

const { value } = useControls({
  color: '#008080',
})

#008080

🍰

color

Range

You can specify a range of number by min and max. If you specify both of them, slider control will be created.

const { value } = useControls({
  planets: {
    value: 8,
    min: 1,
    max: 9,
    step: 1
  },
})

🪐🪐🪐🪐🪐🪐🪐🪐

🍰

planets

Select

You can specify a list of options by options property. If you specify it, select control will be created.

const { value } = useControls({
  videogame: {
    value: 'crashbandicoot',
    options: [{
      text: 'Crash Bandicoot',
      value: 'crashbandicoot',
    }, {
      text: 'Metal Gear Solid',
      value: 'metal-gear-solid',
    }, {
      text: 'Legend of Zelda',
      value: 'legend-of-zelda',
    }],
  },
})

crashbandicoot

🍰

videogameCrash BandicootMetal Gear SolidLegend of Zelda

Vector

You can specify a vector by adding a isVector3, isVector2, isEuler properties or by passing an array. If you specify them, vector control will be created.

import { Vector3 } from 'three'

const { value } = useControls({
  position: new Vector3(0, 1, 2)
})

{
  "x": 0,
  "y": 1,
  "z": 2
}

🍰

position

x

y

z

Button

useControls({
  acceptBtn: {
    label: 'Accept',
    type: 'button',
    onClick: () => {
      console.log('accept')
    },
    size: 'sm',
  },
})

Click a button

🍰

Variants

useControls({
  acceptBtn: {
    label: 'Button Secondary',
    type: 'button',
    variant: 'secondary',
    onClick: () => {
      console.log('accept')
    },
  },
})

Click a button

🍰

Sizes

useControls({
  acceptBtn: {
    label: 'Button Small',
    type: 'button',
    size: 'sm',
    onClick: () => {
      console.log('accept')
    },
  },
})

Click a button

🍰