---
title: Flip
description: "`Flip` is a component that provides an animation to switch between two elements while flipping."
links:
  - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/flip/flip.style.ts
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/flip
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-flip--basic
---

```tsx
<Flip from={<AppleIcon fontSize="2xl" />} to={<CherryIcon fontSize="2xl" />} />
```

## Usage

```tsx
import { Flip } from "@yamada-ui/react"
```

```tsx
import { Flip } from "@/components/ui"
```

```tsx
import { Flip } from "@workspaces/ui"
```

```tsx
<Flip />
```

### Change Direction

To change the direction, set `orientation` to `"horizontal"` or `"vertical"`. By default, `"horizontal"` is set.

```tsx
<Flip
  orientation="vertical"
  from={<AppleIcon fontSize="2xl" />}
  to={<CherryIcon fontSize="2xl" />}
/>
```

### Change the Duration

To change the duration, set a numerical value (seconds) to `duration`.

```tsx
<Flip
  duration={1.4}
  from={<AppleIcon fontSize="2xl" />}
  to={<CherryIcon fontSize="2xl" />}
/>
```

### Delay

If you want to delay the switch, set a numerical value (seconds) to `delay`.

```tsx
<Flip
  delay={1}
  from={<AppleIcon fontSize="2xl" />}
  to={<CherryIcon fontSize="2xl" />}
/>
```

### Disable

To disable, set `disabled` to `true`.

```tsx
<Flip
  disabled
  from={<AppleIcon fontSize="2xl" />}
  to={<CherryIcon fontSize="2xl" />}
/>
```

### Read-Only

To ready-Only, set `readOnly` to `true`.

```tsx
<Flip
  readOnly
  from={<AppleIcon fontSize="2xl" />}
  to={<CherryIcon fontSize="2xl" />}
/>
```

### Control

```tsx
const [value, onChange] = useState<KeyframeIdent>("from")

return (
  <Flip
    from={<AppleIcon fontSize="2xl" />}
    to={<CherryIcon fontSize="2xl" />}
    value={value}
    onChange={onChange}
  />
)
```

## Props

| Prop           | Default        | Type                                                                                                                      | Description                                                                                        |
| -------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
| `as`           | -              | `keyof IntrinsicElements`                                                                                                 | The HTML element to render.                                                                        |
| `asChild`      | -              | `boolean`                                                                                                                 | Merges its props onto its immediate child.                                                         |
| `css`          | -              | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                                                                                    |
| `colorScheme`  | -              | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                                                                        |
| `defaultValue` | `"from"`       | `KeyframeIdent`                                                                                                           | You can set the initial state.                                                                     |
| `delay`        | `0`            | `number`                                                                                                                  | 　The animation delay.                                                                             |
| `disabled`     | `false`        | `boolean`                                                                                                                 | If `true`, the component is disabled.                                                              |
| `duration`     | `0.4`          | `number`                                                                                                                  | The animation duration.                                                                            |
| `from`         | -              | `ReactNode`                                                                                                               | Passing React elements to "from" is required.                                                      |
| `onChange`     | -              | `(value: KeyframeIdent) => void`                                                                                          | This is a callback function that is called when the animation state changes.                       |
| `orientation`  | `"horizontal"` | `Orientation`                                                                                                             | The orientation of the flip effect. Determines whether the flip occurs horizontally or vertically. |
| `readOnly`     | `false`        | `boolean`                                                                                                                 | If `true`, the component is readonly.                                                              |
| `to`           | -              | `ReactNode`                                                                                                               | Passing React elements to "to" is required.                                                        |
| `value`        | -              | `KeyframeIdent`                                                                                                           | Use this when you want to control the animation from outside the component.                        |