RadioTabs

Radio selection component in row layout.

160 GB SSD disk

512 GB SSD disk

1024 GB SSD disk



1import React from 'react'
2import RadioTabs from '@tempoplatform/tpds/components/radiotabs'
3
4const items = [
5  {
6    title: 'Startup',
7    description: '160 GB SSD disk',
8  },
9  {
10    title: 'Business',
11    description: '512 GB SSD disk',
12  },
13  {
14    title: 'Enterprise',
15    description: '1024 GB SSD disk',
16  },
17]
18
19const [selectedIndex, setSelectedIndex] = React.useState(0)
20
21<RadioTabs
22  items={items}
23  outlineStyle={true}
24  selectedIndex={selectedIndex}
25  handleIndexSelection={setSelectedIndex}
26/>


Prop Name

Type

Default

Required

Description

items

JSX

null

yes

The items to be displayed

selectedIndex

Int

null

yes

The index to show as selected

callBack

Function

null

yes

The callout function used to select the clicked index

stackAtBreakpoint

String

""

no

Option breakpoint at whit to stack the items. Valid values are "sm", "md", "lg", "xl", "2xl"