Skip to content

Latest commit

 

History

History
173 lines (135 loc) · 5.14 KB

switch.md

File metadata and controls

173 lines (135 loc) · 5.14 KB

Switch

Adapt UI provides a Switch Component, an alternative for Checkbox Component.

It also allows a user to switch between enabled or disabled states.

simulator_screenshot_14180790-B42D-42A9-BB07-02EBA83784CA

Simple Usage

import { Switch } from "@adaptui/react-native-tailwind"
export default function App() {
  return (
      <Switch />
  )
}

Table of Contents

Themes

Adapt UI provides two themes for the Switch Component: base & primary

simulator_screenshot_FBB31712-6893-42DB-991E-6FAEAEDD75BC

Usage

import { Switch, Search, Icon } from "@adaptui/react-native-tailwind"
export default function App() {
  return (
    <>
      <Box style={tailwind.style("my-2")}>
        <Switch />
      </Box>
      <Box style={tailwind.style("my-2")}>
        <Switch themeColor="primary" />
      </Box>
    </>
  )
}

Size

There are four different sizes for Switch Component in Adapt UI: sm, md, lg & xl

Based on the hierarchy, you can switch between different sizes.

simulator_screenshot_1BC78AEB-B4EF-419B-9878-D3E81C97A941

Usage

import { Switch, useTheme } from "@adaptui/react-native-tailwind"

export default function App() {
  const tailwind = useTheme();
  return (
    <>
      <Box style={tailwind.style("my-2")}>
        <Switch size="sm" />
      </Box>
      <Box style={tailwind.style("my-2")}>
        <Switch size="md" />
      </Box>
      <Box style={tailwind.style("my-2")}>
        <Switch size="lg" />
      </Box>
      <Box style={tailwind.style("my-2")}>
        <Switch />
      </Box>
    </>
  )
}

Label

As the name suggests, it provides a label with a switch component. Since this is an independent property, you can have labels with different themes, interactions, or even sizes.

simulator_screenshot_3E315378-0093-43C7-B44B-7E50EE913AD6

Usage

import { Switch, useTheme } from "@adaptui/react-native-tailwind"

export default function App() {
  const tailwind = useTheme();
  return (
    <>
      <Box style={tailwind.style("my-2")}>
        <Switch label="Notify me about replies to threads" />
      </Box>
    </>
  )
}

Description

This property can give you description text along with the label.

simulator_screenshot_324BE720-7C7D-494D-B2AD-7C67896627BF

Usage

import { Switch, useTheme } from "@adaptui/react-native-tailwind"

export default function App() {
  const tailwind = useTheme();
  return (
    <>
      <Box style={tailwind.style("my-2")}>
        <Switch 
          label="Notify Weekly reports" 
          description="Status updates on projects in your portfolios" 
        />
      </Box>
    </>
  )
}

Props

Name Description Type Default
size The size of the switch component sm md lg xl xl
themeColor The Theme of the switch component base primary base
defaultState The Default value of switch (uncontrolled) boolean false
state Value of switch, true means on, false means off boolean false
onStateChange Callback called with the new value when it changes (value: boolean) => void
disabled disabled state of switch boolean false
onStateColor The color used to appear in on position string
offStateColor The color used to appear in off position string
onStatePressedColor The color used in pressed on state string
offStatePressedColor The color used in pressed off state string
thumbTintColor The color used for the thumb/knob string
label The label of Switch Component string
description The description of the Switch Component string