`Select`

The Select control provides your component a value, from a list of options, that is selectable in the Makeswift builder.

AnchorExamples

AnchorA button with variants

In this example we register a Button component with a variant prop that can be either solid, outline, or clear and is controlled by a Select control.

import { ReactRuntime } from '@makeswift/runtime/react'
import { Select } from '@makeswift/runtime/controls'

function Button({ variant }) {
  const style = {
    solid: {
      backgroundColor: 'cornflowerblue',
      color: 'white',
    },
    outline: {
      backgroundColor: 'white',
      color: 'cornflowerblue',
      border: '1px solid cornflowerblue',
    },
    clear: {
      backgroundColor: 'transparent',
      color: 'cornflowerblue',
    },
  }[variant]

  return <button style={style}>Submit</button>
}

ReactRuntime.registerComponent(Button, {
  type: 'button',
  label: 'Button',
  props: {
    variant: Select({
      label: 'Variant',
      labelOrientation: 'vertical',
      options: [
        { value: 'solid', label: 'Solid' },
        { value: 'outline', label: 'Outline' },
        { value: 'clear', label: 'Clear' },
      ],
      defaultValue: 'solid',
    }),
  },
})

AnchorAPI

AnchorParameters

Parameter	Type	Required	Default	Description
`label`	`string`	no	`'Text'`	Text for the panel label.
`labelOrientation`	`LabelOrientation`	no	`'horizontal'`	Position of the panel label.
`options`	`SelectControlOption<T>[]`	yes	N/A	The options available in the panel input.
`defaultValue`	`T`	no	`undefined`	Will be used when the value isn't set.

AnchorProvided value

The Select control provides a value from one of the options to your component—or undefined if there's no value set. Use defaultValue if you never want your component to receive undefined.

AnchorTypes

type LabelOrientation = 'vertical' | 'horizontal'

type SelectControlOption<T extends string> = { value: T; label: string }