Docplanner Mobile UI

⚙️ – Core

🧬 – Organisms

SwitchField

A switch allows users to turn things ON or OFF, like a light switch. We can use them when needing to perform instantaneous actions that do not need a review or confirmation, or defining a isLoading prop to show a spinner.

Properties

label

ReactNode

required

Switch label

error

string | undefined

Error message

switchStyle

ViewStyle | undefined

Style that applies to the container of the switch.

value

boolean

required

Flag to trigger the movement of the thumb of the switch from one side to the other.

onValueChange

(value: boolean) => void

required

Callback called when after a click the user release the switch, it pass the future value of the switch. Even if the switch is passing the next value the user should set the isActive value to trigger the changes.

isLoading

boolean | undefined

Flag used to show an internal spinner.

isDisabled

boolean | undefined

Flag used to make not clickable the spinner.

inActiveTrackColor

Change the inactive color of the background of the switch, default is gray300.

activeTrackColor

Change the active color of the background of the switch, default is blue.

thumbColor

Change the thumb color of the switch, default is white.

testID

string | undefined

accessibilityLabel

string | undefined

Basic usage

<Switch /> does not render properly here. Please fire up the demo app to see what it really looks like.

() => {
  const [filterOn, toggleFilter] = useState(false)
  return (
    <MobileScreen isWhite>
      <SwitchField
        label="Show only specialists who offer booking an appointment online"
        value={filterOn}
        onValueChange={toggleFilter}
      />
    </MobileScreen>
  )
}

() => {
  const [filterOn, toggleFilter] = useState(false)
  return (
    <MobileScreen isWhite>
      <SwitchField
        label="Show only specialists who offer booking an appointment online"
        value={filterOn}
        onValueChange={toggleFilter}
      />
    </MobileScreen>
  )
}

Error state

() => {
  const [filterOn, toggleFilter] = useState(false)
  return (
    <MobileScreen isWhite>
      <SwitchField
        label="Show only specialists who offer booking an appointment online"
        error="Need to check it first"
        value={filterOn}
        onValueChange={toggleFilter}
      />
    </MobileScreen>
  )
}

() => {
  const [filterOn, toggleFilter] = useState(false)
  return (
    <MobileScreen isWhite>
      <SwitchField
        label="Show only specialists who offer booking an appointment online"
        error="Need to check it first"
        value={filterOn}
        onValueChange={toggleFilter}
      />
    </MobileScreen>
  )
}

Switch with loading example

() => {
  const [filterOn, toggleFilter] = useState(false)
  const [isLoading, setIsLoading] = useState(false)
  const onValueChange = value => {
    setIsLoading(true)
    toggleFilter(value)
    setTimeout(() => {
      setIsLoading(false)
    }, 1000)
  }
  return (
    <MobileScreen isWhite>
      <SwitchField
        label="Show only specialists who offer booking an appointment online"
        value={filterOn}
        onValueChange={onValueChange}
        isLoading={isLoading}
      />
    </MobileScreen>
  )
}

() => {
  const [filterOn, toggleFilter] = useState(false)
  const [isLoading, setIsLoading] = useState(false)
  const onValueChange = value => {
    setIsLoading(true)
    toggleFilter(value)
    setTimeout(() => {
      setIsLoading(false)
    }, 1000)
  }
  return (
    <MobileScreen isWhite>
      <SwitchField
        label="Show only specialists who offer booking an appointment online"
        value={filterOn}
        onValueChange={onValueChange}
        isLoading={isLoading}
      />
    </MobileScreen>
  )
}

Docplanner Mobile UI

SwitchField

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

Basic usage

Error state

Switch with loading example

Properties