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 }