Docplanner Mobile UI

Edit page

SelectField

A standard component to let a user pick one of the provided options.

Properties

compact

boolean | undefined

Determines whether it’s a caret icon or a text saying ‘Select’ on the right

shouldConfirm

boolean | undefined

Whether users needs to confirm their selection

error

string | undefined

If presents shows the message under the select and makes the border and label change color to red

keyExtractor

((item: Item) => string) | undefined

Prop passed through directly to the modal’s FlatList. If not provided, labelExtractor is used.

label

string

required

Label

labelExtractor

(item: Item) => string

required

Function that takes in an option item and returns a label displayed in the list

modalSubtitle

string | undefined

Modal subtitle

modalTitle

string | undefined

Modal title

onChange

(value: string) => void

required

Regular input onChange handler

onGoBack

(() => void) | undefined

Callback fired when the close icon is pressed

options

Item[]

required

Data representing the options

renderOptionPrefix

((item: Item) => ReactNode) | undefined

An element to render before each option in the options list

selectionExtractor

((item: Item) => string) | undefined

Function that takes in an the selected item and returns a string displayed as the selected value If not providerd, labelExtractor is used.

value

string | undefined

Selected value

valueExtractor

(item: Item) => string

required

Function that takes in an option item and returns a value that’s later passed to onChange

Basic usage

() => {
  const SelectFieldDemo = () => {
    const [value, setValue] = useState('')
    const options = [
      { value: 'es', label: 'Spain' },
      { value: 'pl', label: 'Poland' },
    ]
    const valueExtractor = ({ value }) => value
    const labelExtractor = ({ label }) => label
    return (
      <MobileScreen isWhite>
        <SelectField
          label="Country"
          labelExtractor={labelExtractor}
          modalTitle="Country"
          modalSubtitle="Choose an option from the list"
          onChange={setValue}
          onGoBack={() => console.log('onGoBack')}
          options={options}
          value={value}
          valueExtractor={valueExtractor}
        />
      </MobileScreen>
    )
  }
  return <SelectFieldDemo />
}

() => {
  const SelectFieldDemo = () => {
    const [value, setValue] = useState('')
    const options = [
      { value: 'es', label: 'Spain' },
      { value: 'pl', label: 'Poland' },
    ]
    const valueExtractor = ({ value }) => value
    const labelExtractor = ({ label }) => label
    return (
      <MobileScreen isWhite>
        <SelectField
          label="Country"
          labelExtractor={labelExtractor}
          modalTitle="Country"
          modalSubtitle="Choose an option from the list"
          onChange={setValue}
          onGoBack={() => console.log('onGoBack')}
          options={options}
          value={value}
          valueExtractor={valueExtractor}
        />
      </MobileScreen>
    )
  }
  return <SelectFieldDemo />
}

Compact

Uses a caret icon instead of a 'Select' link to open the modal

() => {
  const CompactSelectFieldDemo = () => {
    const [value, setValue] = useState('')
    const options = [
      { value: 'es', label: '+34' },
      { value: 'pl', label: '+48' },
    ]
    const valueExtractor = ({ value }) => value
    const labelExtractor = ({ label }) => label
    return (
      <MobileScreen isWhite>
        <View style={{ width: 100 }}>
          <SelectField
            label="Prefix"
            labelExtractor={labelExtractor}
            modalTitle="Prefix"
            modalSubtitle="Choose an option from the list"
            onChange={setValue}
            onGoBack={() => console.log('onGoBack')}
            options={options}
            value={value}
            compact
            valueExtractor={valueExtractor}
          />
        </View>
      </MobileScreen>
    )
  }
  return <CompactSelectFieldDemo />
}

() => {
  const CompactSelectFieldDemo = () => {
    const [value, setValue] = useState('')
    const options = [
      { value: 'es', label: '+34' },
      { value: 'pl', label: '+48' },
    ]
    const valueExtractor = ({ value }) => value
    const labelExtractor = ({ label }) => label
    return (
      <MobileScreen isWhite>
        <View style={{ width: 100 }}>
          <SelectField
            label="Prefix"
            labelExtractor={labelExtractor}
            modalTitle="Prefix"
            modalSubtitle="Choose an option from the list"
            onChange={setValue}
            onGoBack={() => console.log('onGoBack')}
            options={options}
            value={value}
            compact
            valueExtractor={valueExtractor}
          />
        </View>
      </MobileScreen>
    )
  }
  return <CompactSelectFieldDemo />
}

Compact with a custom selectionExtractor

The selected value is displayed differently than shown on the list initially.

() => {
  const CompactSelectFieldDemo = () => {
    const [value, setValue] = useState('')
    const options = [
      { country: 'Spain', value: '+34' },
      { country: 'Poland', value: '+48' },
    ]
    const valueExtractor = ({ value }) => value
    const labelExtractor = ({ country, value }) => `${value} (${country})`
    const selectionExtractor = ({ value }) => value.replace('+', '00')
    return (
      <MobileScreen isWhite>
        <View style={{ width: 100 }}>
          <SelectField
            label="Prefix"
            labelExtractor={labelExtractor}
            selectionExtractor={selectionExtractor}
            modalTitle="Prefix"
            modalSubtitle="Choose an option from the list"
            onChange={setValue}
            onGoBack={() => console.log('onGoBack')}
            options={options}
            value={value}
            compact
            valueExtractor={valueExtractor}
          />
        </View>
      </MobileScreen>
    )
  }
  return <CompactSelectFieldDemo />
}

() => {
  const CompactSelectFieldDemo = () => {
    const [value, setValue] = useState('')
    const options = [
      { country: 'Spain', value: '+34' },
      { country: 'Poland', value: '+48' },
    ]
    const valueExtractor = ({ value }) => value
    const labelExtractor = ({ country, value }) => `${value} (${country})`
    const selectionExtractor = ({ value }) => value.replace('+', '00')
    return (
      <MobileScreen isWhite>
        <View style={{ width: 100 }}>
          <SelectField
            label="Prefix"
            labelExtractor={labelExtractor}
            selectionExtractor={selectionExtractor}
            modalTitle="Prefix"
            modalSubtitle="Choose an option from the list"
            onChange={setValue}
            onGoBack={() => console.log('onGoBack')}
            options={options}
            value={value}
            compact
            valueExtractor={valueExtractor}
          />
        </View>
      </MobileScreen>
    )
  }
  return <CompactSelectFieldDemo />
}

With initial value

() => {
  const SelectFieldDemo = () => {
    const [value, setValue] = useState('es')
    const options = [
      { value: 'es', label: 'Spain' },
      { value: 'pl', label: 'Poland' },
    ]
    const valueExtractor = ({ value }) => value
    const labelExtractor = ({ label }) => label
    return (
      <MobileScreen isWhite>
        <SelectField
          label="Country"
          labelExtractor={labelExtractor}
          modalTitle="Country"
          modalSubtitle="Choose an option from the list"
          onChange={setValue}
          onGoBack={() => console.log('onGoBack')}
          options={options}
          value={value}
          valueExtractor={valueExtractor}
        />
      </MobileScreen>
    )
  }
  return <SelectFieldDemo />
}

() => {
  const SelectFieldDemo = () => {
    const [value, setValue] = useState('es')
    const options = [
      { value: 'es', label: 'Spain' },
      { value: 'pl', label: 'Poland' },
    ]
    const valueExtractor = ({ value }) => value
    const labelExtractor = ({ label }) => label
    return (
      <MobileScreen isWhite>
        <SelectField
          label="Country"
          labelExtractor={labelExtractor}
          modalTitle="Country"
          modalSubtitle="Choose an option from the list"
          onChange={setValue}
          onGoBack={() => console.log('onGoBack')}
          options={options}
          value={value}
          valueExtractor={valueExtractor}
        />
      </MobileScreen>
    )
  }
  return <SelectFieldDemo />
}

With an error

() => {
  const SelectFieldDemo = () => {
    const [value, setValue] = useState('')
    const options = [
      { value: 'es', label: 'Spain' },
      { value: 'pl', label: 'Poland' },
    ]
    const valueExtractor = ({ value }) => value
    const labelExtractor = ({ label }) => label
    return (
      <MobileScreen isWhite>
        <SelectField
          error="Required"
          label="Country"
          labelExtractor={labelExtractor}
          modalTitle="Country"
          modalSubtitle="Choose an option from the list"
          onChange={setValue}
          onGoBack={() => console.log('onGoBack')}
          options={options}
          value={value}
          valueExtractor={valueExtractor}
        />
      </MobileScreen>
    )
  }
  return <SelectFieldDemo />
}

() => {
  const SelectFieldDemo = () => {
    const [value, setValue] = useState('')
    const options = [
      { value: 'es', label: 'Spain' },
      { value: 'pl', label: 'Poland' },
    ]
    const valueExtractor = ({ value }) => value
    const labelExtractor = ({ label }) => label
    return (
      <MobileScreen isWhite>
        <SelectField
          error="Required"
          label="Country"
          labelExtractor={labelExtractor}
          modalTitle="Country"
          modalSubtitle="Choose an option from the list"
          onChange={setValue}
          onGoBack={() => console.log('onGoBack')}
          options={options}
          value={value}
          valueExtractor={valueExtractor}
        />
      </MobileScreen>
    )
  }
  return <SelectFieldDemo />
}

With an option prefixed element

() => {
  const SelectFieldDemo = () => {
    const [value, setValue] = useState('')
    const options = [
      { value: 'red', label: 'Red' },
      { value: 'blue', label: 'Blue' },
    ]
    const valueExtractor = ({ value }) => value
    const labelExtractor = ({ label }) => label
    return (
      <MobileScreen isWhite>
        <SelectField
          label="Colors"
          labelExtractor={labelExtractor}
          modalTitle="Colors"
          modalSubtitle="Choose an option from the list"
          onChange={setValue}
          onGoBack={() => console.log('onGoBack')}
          options={options}
          renderOptionPrefix={({ value }) => (
            <DpCircle size="sm" color={value} emphasis="low" />
          )}
          value={value}
          valueExtractor={valueExtractor}
        />
      </MobileScreen>
    )
  }
  return <SelectFieldDemo />
}

() => {
  const SelectFieldDemo = () => {
    const [value, setValue] = useState('')
    const options = [
      { value: 'red', label: 'Red' },
      { value: 'blue', label: 'Blue' },
    ]
    const valueExtractor = ({ value }) => value
    const labelExtractor = ({ label }) => label
    return (
      <MobileScreen isWhite>
        <SelectField
          label="Colors"
          labelExtractor={labelExtractor}
          modalTitle="Colors"
          modalSubtitle="Choose an option from the list"
          onChange={setValue}
          onGoBack={() => console.log('onGoBack')}
          options={options}
          renderOptionPrefix={({ value }) => (
            <DpCircle size="sm" color={value} emphasis="low" />
          )}
          value={value}
          valueExtractor={valueExtractor}
        />
      </MobileScreen>
    )
  }
  return <SelectFieldDemo />
}

Docplanner Mobile UI

SelectField

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Properties

Basic usage

Compact

Compact with a custom selectionExtractor

With initial value

With an error

With an option prefixed element

Properties