Segmented

Property	Description	Type	Default
block	Option to fit width to its parent's width	boolean	false
defaultValue	Default selected value	string \| number
disabled	Disable all segments	boolean	false
onChange	The callback function that is triggered when the state changes	function(value: string \| number)
options	Set children optional	string[] \| number[] \| Array<{ label: ReactNode value: string icon? ReactNode disabled?: boolean className?: string }>	[]
size	The size of the Segmented.	`large` \| `middle` \| `small`	`middle`
value	Currently selected value	string \| number

Property	Description	Type	Default
block	Option to fit width to its parent's width	boolean	false
defaultValue	Default selected value	string \| number
disabled	Disable all segments	boolean	false
onChange	The callback function that is triggered when the state changes	function(value: string \| number)
options	Set children optional	string[] \| number[] \| Array<{ label: ReactNode value: string icon? ReactNode disabled?: boolean className?: string }>	[]
size	The size of the Segmented.	`large` \| `middle` \| `small`	`middle`
value	Currently selected value	string \| number

The most basic usage.

TypeScript
JavaScript
import React from 'react';
import { Segmented } from 'mogud';

export default () => <Segmented options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />;

Basic

Disabled Segmented.

TypeScript
JavaScript
import React from 'react';
import { Segmented, Space } from 'mogud';

const App: React.FC = () => (
  <Space direction="vertical">
    <Segmented options={['Map', 'Transit', 'Satellite']} disabled />
    <Segmented
      options={[
        'Daily',
        { label: 'Weekly', value: 'Weekly', disabled: true },
        'Monthly',
        { label: 'Quarterly', value: 'Quarterly', disabled: true },
        'Yearly',
      ]}
    />
  </Space>
);

export default App;

Custom Render

Custom each Segmented Item by ReactNode.

TypeScript
JavaScript
import React from 'react';
import { Avatar, Segmented, Space } from 'mogud';
import { UserOutlined } from '@ant-design/icons';

const App: React.FC = () => (
  <Space direction="vertical">
    <Segmented
      options={[
        {
          label: (
            <div style={{ padding: 4 }}>
              <Avatar src="https://joesch.moe/api/v1/random" />
              <div>User 1</div>
            </div>
          ),
          value: 'user1',
        },
        {
          label: (
            <div style={{ padding: 4 }}>
              <Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
              <div>User 2</div>
            </div>
          ),
          value: 'user2',
        },
        {
          label: (
            <div style={{ padding: 4 }}>
              <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
              <div>User 3</div>
            </div>
          ),
          value: 'user3',
        },
      ]}
    />
    <Segmented
      options={[
        {
          label: (
            <div style={{ padding: 4 }}>
              <div>Spring</div>
              <div>Jan-Mar</div>
            </div>
          ),
          value: 'spring',
        },
        {
          label: (
            <div style={{ padding: 4 }}>
              <div>Summer</div>
              <div>Apr-Jun</div>
            </div>
          ),
          value: 'summer',
        },
        {
          label: (
            <div style={{ padding: 4 }}>
              <div>Autumn</div>
              <div>Jul-Sept</div>
            </div>
          ),
          value: 'autumn',
        },
        {
          label: (
            <div style={{ padding: 4 }}>
              <div>Winter</div>
              <div>Oct-Dec</div>
            </div>
          ),
          value: 'winter',
        },
      ]}
    />
  </Space>
);

export default App;

Three sizes of Segmented

There are three sizes of an Segmented: large (40px), default (32px) and small (24px).

TypeScript
JavaScript
import React from 'react';
import { Segmented, Space } from 'mogud';

const App: React.FC = () => (
  <Space direction="vertical">
    <Segmented size="large" options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />
    <Segmented options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />
    <Segmented size="small" options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />
  </Space>
);

export default App;

With Icon only

Set icon without label for Segmented Item.

TypeScript
JavaScript
import React from 'react';
import { Segmented } from 'mogud';
import { AppstoreOutlined, BarsOutlined } from '@ant-design/icons';

export default () => (
  <Segmented
    options={[
      {
        value: 'List',
        icon: <BarsOutlined />,
      },
      {
        value: 'Kanban',
        icon: <AppstoreOutlined />,
      },
    ]}
  />
);

Block Segmented

block property will make the Segmented fit to its parent width.

TypeScript
JavaScript
import React from 'react';
import { Segmented } from 'mogud';

export default () => (
  <Segmented block options={[123, 456, 'longtext-longtext-longtext-longtext']} />
);

Controlled mode

Controlled Segmented.

TypeScript
JavaScript
import React, { useState } from 'react';
import { Segmented } from 'mogud';

const Demo: React.FC = () => {
  const [value, setValue] = useState<string | number>('Map');

  return <Segmented options={['Map', 'Transit', 'Satellite']} value={value} onChange={setValue} />;
};

export default Demo;

Dynamic

Load options dynamically.

TypeScript
JavaScript
import React, { useState } from 'react';
import { Segmented, Button, Space } from 'mogud';

const Demo: React.FC = () => {
  const [options, setOptions] = useState(['Daily', 'Weekly', 'Monthly']);
  const [moreLoaded, setMoreLoaded] = useState(false);

  const handleLoadOptions = () => {
    setOptions((prev) => [...prev, 'Quarterly', 'Yearly']);
    setMoreLoaded(true);
  };

  return (
    <Space direction="vertical">
      <Segmented options={options} />
      <Button type="primary" disabled={moreLoaded} onClick={handleLoadOptions}>
        Load more options
      </Button>
    </Space>
  );
};

export default Demo;

With Icon

Set icon for Segmented Item.

TypeScript
JavaScript
import React from 'react';
import { Segmented } from 'mogud';
import { AppstoreOutlined, BarsOutlined } from '@ant-design/icons';

export default () => (
  <Segmented
    options={[
      {
        label: 'List',
        value: 'List',
        icon: <BarsOutlined />,
      },
      {
        label: 'Kanban',
        value: 'Kanban',
        icon: <AppstoreOutlined />,
      },
    ]}
  />
);

Mogu Design

Mogu Design

Segmented

When To Use

Examples

API

When To Use

Examples

API