Select.Inline

View Source

A base component that composes Select and provides transparent styles.

render(
  <Box padding={2} backgroundColor="primary">
    <Select.Inline light>
      {generateRange(100).map((number) => (
        <Select.Option key={number} value={number}>
          {number}
        </Select.Option>
      ))}
    </Select.Inline>
    <Input.Inline
      size="xl"
      fontSize={0}
      light
      defaultValue="Editable Heading"
    />
  </Box>
)

render(
  <Box padding={2} backgroundColor="primary">
    <Select.Inline light>
      {generateRange(100).map((number) => (
        <Select.Option key={number} value={number}>
          {number}
        </Select.Option>
      ))}
    </Select.Inline>
    <Input.Inline
      size="xl"
      fontSize={0}
      light
      defaultValue="Editable Heading"
    />
  </Box>
)

Props

Accepts Select props.

focusStyleProps['focus']

Accepts focus styles.

hoverStyleProps['hover']

Accepts hover styles.

lightboolean

Changes the background and text color values

readOnlyboolean

Props

PreviousSelect NextSelect.Option