Render the first matching state. Use it for mutually exclusive loading, empty and ready views.

Display a playback state

tsx
import { Match, Switch, Text, signal } from 'kuito';

export default function Status() {
  const state = signal<'idle' | 'playing' | 'paused'>('idle');

  return (
    <Switch fallback={<Text>Nothing playing</Text>}>
      <Match when={state.value === 'playing'}>
        <Text>Playing</Text>
      </Match>
      <Match when={state.value === 'paused'}>
        <Text>Paused</Text>
      </Match>
    </Switch>
  );
}

Behavior

Use Match as direct children. Only the first truthy condition renders; fallback handles no match. Use Toggle for an on/off input.

Continue

Read Control flow for a complete workflow. See the complete prop reference for types and documented defaults.

Référence

Signatures

ts
(props: SwitchProps): KuitoElement

Paramètres

NomTypeRequisDescription
propsSwitchPropsOui—

Retourne

KuitoElement

Props: SwitchProps

Props (props héritées incluses) 3

NomTypeRequisDescription
fallbackKuitoNodeNon—
childrenKuitoNodeNonMatch elements only.
keystring | numberNon—
Généré depuis les déclarations TypeScript publiques : signatures, props et valeurs par défaut viennent de la source vérifiée, les descriptions de sa JSDoc. Aucune valeur par défaut n'est inventée.