Props

A string type is displayed as a text input.

export function Component(props: { name: string });

A number type is displayed as a number input.

export function Component(props: { size: number });

A boolean type is displayed as a checkbox input.

export function Component(props: { isHidden: boolean });

A union type prop which has all literal types is displayed as a select input.

export function Component(props: {
  variant: "primary" | "secondary" | "tertiary";
});

A union type prop which has mixed types is displayed as the appropriate input for each type.

export function Component(props: {
  color: string | number | [number, number, number];
});

Switch between types using the Switch Prop Type action.

A tuple type prop is a finite list of types in an array. It is displayed as a list of inputs appropriate for each individual type.

Here the position prop will be displayed as three number inputs.

export function Component(props: { position: [number, number, number] });