SingleSelect

SingleSelect

Use a SingleSelect when selecting a zero or more values from a larger set of values; where it is not nececssary to show all values immediately.

The SingleSelect tracks its selectedItem as an object that must have an value and a label.

In the abscense of a selection prop it will use the label of the selectedItem as the value of the underlying input field.

Single Select

<Basic />

Control Selection Rendering

<CustomSelectionRendering />

Creatable

<CreateableExample />

States

<SpacedGroup direction="vertical">
    <SingleSelect renderOptions={noop} fullWidth hintText="Default" />
    <SingleSelect renderOptions={noop} fullWidth disabled hintText="Disabled" />
    <SingleSelect renderOptions={noop} fullWidth dirty hintText="Dirty" />
    <SingleSelect renderOptions={noop} fullWidth hintText="Focused" />
    <SingleSelect
      renderOptions={noop}
      fullWidth
      error="snikes"
      hintText="Error"
    />
  
</Playground>

Inline Edit

<SpacedGroup direction="vertical">
    <SingleSelect
      renderOptions={noop}
      fullWidth
      inlineEdit
      hintText="Default"
    />
    <SingleSelect
      renderOptions={noop}
      fullWidth
      inlineEdit
      disabled
      hintText="Disabled"
    />
    <SingleSelect
      renderOptions={noop}
      fullWidth
      inlineEdit
      dirty
      hintText="Dirty"
    />
    <SingleSelect
      renderOptions={noop}
      fullWidth
      inlineEdit
      error="snikes"
      hintText="Error"
    />
    <SingleSelect
      renderOptions={noop}
      fullWidth
      inlineEdit
      loading
      hintText="Loading"
    />
    <SingleSelect
      renderOptions={noop}
      fullWidth
      inlineEdit
      success
      hintText="Success"
    />
  
</Playground>

API

VersionOne Components v9.1.0